如何防止控制台在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

());

使用缩小器和混淆器变得有点困难.

缩小器的主要目的是通过重命名名称和以较短的方式重写代码来削减文件大小.副作用是代码变得难以阅读,因为大多数时候代码与原始代码没有任何相似之处.没有源地图会更糟糕,可能需要数小时才能跟踪和理解.

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

再一次,我们只是让你的代码更难达到,抵挡成为"黑客"的崇拜者.

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