为什么我的画布没有清理？

Question

这是我编程的第一年，我在清除 gEnemies 画布时遇到问题。

$(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 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="aqua";
    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 = 5;
  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;

  };
}

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() {
    this.y += this.speed;
  }

}


function render() {

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

  for(x=0;x<8;x++) {
    for(y=0;y<8;y++) {
      enemies.push(new Enemy(x,y));
    }
  }

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

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

  for(i in bullets) bullets[i].render();
}

function tick() {

  createStars(1);
  player.tick();
  for(i in enemies) enemies[i].tick();
  for(i in stars) stars[i].tick();
  for(i in bullets) bullets[i].tick();
  if(shootTimer <= 0) player.canShoot = true;
  shootTimer--;
}

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

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#canvas_background {
  background: black;
}

<!DOCTYPE html>
    <html>
      <head>
      <title> Game </title>
      </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>
      </body>
    </html>

一切正常。我可以移动广场并射击子弹。但是，敌人画布没有正确清理。

要清楚，这就是我试图清除敌人画布的方式：

gEnemies.clearRect(0,0,width,height);

为什么敌人画布不能清除？

Answer 1

正在清理。问题是每次渲染时你都会继续创造64个新敌人：

 for(x=0;x<8;x++) {
  for(y=0;y<8;y++) {
    enemies.push(new Enemy(x,y));
  }
}

将此行添加到您的render功能中，您就会明白我的意思：

console.log('enemies='+enemies.length);