javascript - 如何防止控制台在 HTML5 游戏中作弊？

Question

我设计了一个 HTML5 游戏，其中有一个正方形可以向其他正方形射击。你有一定数量的生命并获得分数。我如何防止用户进入控制台并执行如下操作:

score=5000
planetHealth=200 

游戏代码

$(document).ready(function() {
  initStars(600);
});

var FPS = 60;
width = 300;
height = 400;

var gBackground = document.getElementById("canvas_background").getContext("2d");
var gPlayer = document.getElementById("canvas_player").getContext("2d");
var gEnemies = document.getElementById("canvas_enemies").getContext("2d");
var GUI = document.getElementById("canvas_ui").getContext("2d");

var bullets = [];
var enemies = [];

var shootTimer = 0;
var maxShootTimer = 15;

var score = 0;
var planetHealth = 50;

var gameState = "menu";

var Key = {
  up: false,
  down: false,
  left: false,
  right: false
};

var player = {
  width: 16,
  height: 16,
  x: (width / 2) - 8,
  speed: 3,
  y: height - 20,
  canShoot: true,
  render: function() {
    gPlayer.fillStyle="#24430A";
    gPlayer.fillRect(this.x,this.y,this.width,this.height);
  },
  tick: function() {
    if(Key.left && this.x > 0) this.x -= this.speed;
    if(Key.right && this.x < width - 20) this.x += this.speed;
    if(Key.space && this.canShoot) {
      this.canShoot = false;
      bullets.push(new Bullet(this.x,this.y - 4));
      bullets.push(new Bullet(this.x + this.width,this.y - 4));
      shootTimer = maxShootTimer;
    }
  }
};

stars = [];

addEventListener("keydown", function(e) {
  var keyCode = (e.keyCode) ? e.keyCode : e.which;
  switch(keyCode) {
    case 38: // up
      Key.up = true;
      break;
      
    case 40: // down
      Key.down = true;
      break;
      
    case 37: // left
      Key.left = true;
      break;
      
    case 39: // right
      Key.right = true;
      break;
      
    case 32: //spacebar
    Key.space = true;
    break;
  }
}, false);

addEventListener("keyup", function(e) {
  var keyCode = (e.keyCode) ? e.keyCode : e.which;
  switch(keyCode) {
    case 38: // up
      Key.up = false;
      break;
      
    case 40: // down
      Key.down = false;
      break;
      
    case 37: // left
      Key.left = false;
      break;
      
    case 39: // right
      Key.right = false;
      break;
      
       case 32: //spacebar
    Key.space = false;
    break;
  }
}, false);

function collision(obj1,obj2) {
  return (
     obj1.x < obj2.x+obj2.width &&
     obj1.x + obj1.width > obj2.x &&
     obj1.y < obj2.y+obj2.height &&
     obj1.y + obj1.height > obj2.y
    );
}

function Star(x,y) {
  this.x = x;
  this.y = y;
  this.size = Math.random() * 2.5;
  this.render = function() {
    gBackground.fillStyle = "white";
    gBackground.fillRect(this.x,this.y,this.size,this.size)
  };
  this.tick = function() {
    this.y++;
  }
}

function createStars(amount) {
  for(i=0;i<amount;i ++) {
    stars.push(new Star(Math.random() * width, -5));
  }
}

function initStars(amount) {
  for(i=0;i<amount;i++) {
    stars.push(new Star(Math.random()*width,Math.random()*height));
  }
}

function Bullet(x,y) {
  this.x = x;
  this.y = y;
  this.width = 2;
 this.height = 12;
  this.speed = 3;
  this.render = function() {
   gPlayer.fillStyle = "red";
   gPlayer.fillRect(this.x,this.y,this.width,this.height);
  };
  this.tick = function() {
    if(this.y < -this.height) {
      var index = bullets.indexOf(this);
      bullets.splice(index,1);
    }
    this.y-=this.speed;
    
    for(i in enemies) {
      if(collision(this,enemies[i])) {
        score = score + 50;
         GUI.clearRect(0,0,width,height);
        GUI.fillStyle  ="white";
        GUI.textBaseline = "top";
        GUI.font = "bold 14px Tahoma";
        GUI.fillText("Score: " + score, 2,2);
        GUI.fillText("Lives: " + planetHealth, 2,16);
        var enemyIndex = enemies.indexOf(enemies[i]);
        enemies.splice(enemyIndex,1);
        var bulletIndex = bullets.indexOf(this);
        bullets.splice(bulletIndex,1);
      }
    }
    
  };
}

function Enemy(x,y) {
  this.x = x;
  this.y = y;
  this.width = 16;
  this.height = 16;
  this.speed = 0.5;
  ;
  this.render = function() {
    gEnemies.fillStyle = "red";
    gEnemies.fillRect(this.x,this.y,this.width,this.height);
  };
  this.tick = function() {
    if(this.y > this.height + height)  {
      this.y = -this.height;
    planetHealth--;
    GUI.clearRect(0,0,width,height);
    GUI.fillStyle  ="white";
    GUI.textBaseline = "top";
    GUI.font = "bold 14px Tahoma";
    GUI.fillText("Score: " + score, 2,2);
    GUI.fillText("Lives: " + planetHealth, 2,16);
    }
    this.y += this.speed;
  }
  
}

 for(x=0;x<8;x++) {
  for(y=0;y<8;y++) {
    enemies.push(new Enemy((x*24)+(width/2)-100,y*24));
  }
}


function render() {

if(gameState == "play") {

gBackground.clearRect(0,0,width,height);
gPlayer.clearRect(0,0,width,height);
gEnemies.clearRect(0,0,width,height);
player.render();

for(i in stars) {
  stars[i].render();
}

for(i in enemies) enemies[i].render();

for(i in bullets) bullets[i].render();
} else if(gameState == "gameOver") {
  
   gBackground.clearRect(0,0,width,height);

for(i in stars) {
  stars[i].render();
}
  
  GUI.fillStyle = "white";
  GUI.font = "bold 24px Tahoma";
  GUI.fillText("You're a loser!", width / 2 - 100, height/2);
  gEnemies.clearRect(0,0,width,height);
  gPlayer.clearRect(0,0,width,height);
} else if(gameState == "gameWin") {
  
   gBackground.clearRect(0,0,width,height);

for(i in stars) {
  stars[i].render();
}
  
  GUI.fillStyle = "white";
  GUI.font = "bold 24px Tahoma";
  GUI.fillText("You're a winner!", width / 2 - 100, height/2);
  gEnemies.clearRect(0,0,width,height);
  gPlayer.clearRect(0,0,width,height);
} else if(gameState == "menu") {
  
  gBackground.clearRect(0,0,width,height);

for(i in stars) {
  stars[i].render();
}
  
  GUI.fillStyle = "white";
  GUI.font = "bold 24px Tahoma";
  GUI.fillText("Space Game!", width / 2 - 100, height/2);
  GUI.font= "normal 16px Tahoma";
  GUI.fillText("Press space to start", width / 2 - 90, (height/2)+28);
}
}

if(gameState == "play") {
GUI.fillStyle  ="white";
GUI.textBaseline = "top";
GUI.font = "bold 14px Tahoma";
GUI.fillText("Score: " + score, 2,2);
GUI.fillText("Lives: " + planetHealth, 2,16);
}

function tick() {
  
  createStars(1);
   for(i in stars) stars[i].tick();
  if(gameState == "play") {
    if(planetHealth <= 0) gameState = "gameOver";

if(enemies.length <= 0) gameState = "gameWin";
  player.tick();
for(i in enemies) enemies[i].tick();
 for(i in bullets) bullets[i].tick();
 if(shootTimer <= 0) player.canShoot = true;
 shootTimer--;
  } else if(gameState == "menu") {
    if(Key.space) {
      gameState = "play";
      GUI.clearRect(0,0,width,height);
    }
  }
}

setInterval(function() {
  render();
  tick();
}, 1000/FPS );

<!DOCTYPE html>
<html>
  <head>
  <title> Game </title>
  
  <style>
    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    #canvas_background {
      background: black;
    }
    
  </style>
  
  </head>
  
  <body>
    <canvas id='canvas_background' width='300' height='400'></canvas>
    <canvas id='canvas_player' width='300' height='400'></canvas>
    <canvas id='canvas_enemies' width='300' height='400'></canvas>
    <canvas id='canvas_ui' width='300' height='400'></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src='game.js'></script>
  </body>
</html>

Answer 1

您无法阻止用户篡改控制台，并且浏览器的开发工具为您提供了很多方法来查看代码中的任何地方，甚至在闭包以及缩小代码中。

但是......你可以让它变得更难。

首先，您可以像 Facebook 那样做，只在控制台中打印一个红色的大警告，说“你不应该在这里”。实际上，我们实际上只是在吓跑用户。

另一种选择是将代码包装在一个闭包中，这样它就不会暴露在全局范围内。这避免了通过控制台直接操作。

;(function(){

  // all code in here

());

使它变得有点困难的是使用缩小器和混淆器。

压缩器的主要目的是通过重命名和以更短的方式重写代码来缩小文件大小。副作用是代码变得难以阅读，因为大多数时候它与您的原始代码没有任何相似之处。没有 source map 会更糟并且可能需要数小时才能追踪和理解。

混淆器以一种仍然运行相同的方式重写您的代码，只是以不同且通常不可读的方式编写。他们甚至用 base64 对重写的代码进行编码。对于那些不知道 base64 是什么的人来说，他们已经过去了。

同样，我们只是让您的代码更难访问，以抵御想要成为“黑客”的人。

一种更简单的方法是仅在页面外验证，例如在服务器上验证，并使用多种方法来确定被篡改的数据。像快速打字这样的游戏在一定的时间长度内施加了最高分数，因为我们都知道我们不能每秒输入一百万个单词。有些游戏涉及到数据分析，如果数据看起来不正常。