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那样做，只需在控制台中打出一个大红色警告说“你不应该在这里＆＃34;”。我们实际上只是吓跑了用户。

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

;(function(){

  // all code in here

());

使用缩小器和混淆器更加困难。

缩小器的主要目的是通过重命名名称和以较短的方式重写代码来削减文件大小。副作用是代码变得难以阅读，因为它在大多数情况下都不会与原始代码有任何相似之处。如果没有source map，情况会更糟，可能需要数小时才能跟踪和理解。

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

同样，我们只是让您的代码更难以触及，抵挡想成为黑客＆＃34;黑客＆＃34;。

更简单的方法是在页面外验证，就像在服务器上一样，并使用各种方法来确定篡改数据。速度打字等游戏会在一定时间内产生最大分数，因为我们都知道我们不能每秒输入一百万字。如果数据看起来与众不同，有些游戏涉及数据分析。

Answer 2

你不是。如果你的游戏完全是客户端，那么你就无法阻止玩家作弊。您可以通过代码混淆或将变量排除在全局范围之外来使其变得更加困难，但这不会阻止那些真正想作弊的人。

如果玩家正在连接多台服务器或任何可以实施服务器端检查的服务器，那么用户将无法触及该代码。

Answer 3

您在Javascript的主要范围内运行代码，即window。

创建全局变量时，此变量的范围在window对象中。

因此你可以这样做：

var a = 1;
console.log(a); // 1
console.log(window.a); // 1

使用着名的 IIFE 代表立即调用函数表达式，以避免这种情况非常容易。您可以在MDN处阅读。

就是这样做：

(function() {
    // put all your code inside here
})();

执行此操作时，在该函数内声明的所有变量都将包含在该函数的范围内。

但要注意，你不能阻止用户欺骗游戏，你只能让它变得更难。

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

3 个答案: