javascript - 为什么我的 Space Invaders 不动？

Question

我正在制作一个 Space Invaders 克隆体，我快完成了，但是我的 Space Invaders 移动时遇到问题。我试过使用 += 来移动太空入侵者，但这仍然不起作用。到目前为止，这是我针对敌人的代码:

//pushes enemy values into the array
for (var i = 0; i < cols; i++) {
  enemies[i] = [];

  for (var j = 0; j < rows; j++) {
    enemies[i][j] = {
      x: 0,
      y: 0,
      alive: true,
    };
  }
}

for (var i = cols - 1; i >= 0; i--) {
  for (var j = rows - 1; j >= 0; j--) {
    var b = enemies[i][j];

    if (b.alive === true) {
      var enemyX = (j * 40) + enemyPadding / 2;
      var enemyY = (i * 40) + enemyPadding / 1.5;
      b.x = enemyX;
      b.y = enemyY;
      ctx.beginPath();
      ctx.fillStyle = "rgb(0, 0, 255)";
      ctx.strokeStyle = "rgb(0, 0, 0)";
      ctx.rect(enemyX += 1, enemyY, enemyWidth, enemyHeight);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();

      if (b.y + enemyHeight >= canvas.height) {
        b.x = (j * 40) + enemyPadding / 2;
        b.y = (i * 40) + enemyPadding / 1.5;
        lives--;
      }

      for (var a = 0; a < bullets.length; a++) {
        var w = bullets[a];

        if (w.x + w.w >= b.x && w.x <= b.x + enemyWidth && w.y + w.h > b.y && w.y < b.y + enemyHeight) {
          bullets.splice(a, 1);
          b.alive = false;
          score += 20;
        }
      }
    }
  }
}

这是一个片段:

//defines variables for drawing
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

//bullet variables
var bullets = [];
var bulletWidth = 7;
var bulletHeight = 15;
var bulletSpeed = 5;
var cols = 5;
var rows = 12;

//enemy variables
var enemies = [];
var enemyWidth = 20;
var enemyHeight = 20;
var enemySpeed = 3;
var enemyPadding = 40;

//other important variables
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var wait = 0;
var score = 0;
var lives = 3;
var time = 0;

//movement
document.addEventListener("keydown", d);
document.addEventListener("keyup", u);

function d(e) {
  if (e.keyCode === 37) {
    leftPressed = true;
  } else if (e.keyCode === 39) {
    rightPressed = true;
  }

  if (e.keyCode === 38) {
    upPressed = true;
  }
}

function u(e) {
  if (e.keyCode === 37) {
    leftPressed = false;
  } else if (e.keyCode === 39) {
    rightPressed = false;
  }

  if (e.keyCode === 38) {
    upPressed = false;
  }
}


//pushes enemy values into the array
for (var i = 0; i < cols; i++) {
  enemies[i] = [];
  for (var j = 0; j < rows; j++) {
    enemies[i][j] = {
      x: 0,
      y: 0,
      alive: true,
    };
  }
}

function drawText() {
  ctx.font = "20px Arial";
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fillText("Score: " + score, 10, 20);
  ctx.fillText("Lives: " + lives, width - 75, 20);
}

function drawEnemy() {
  for (var i = cols - 1; i >= 0; i--) {
    for (var j = rows - 1; j >= 0; j--) {
      var b = enemies[i][j];
      if (b.alive === true) {
        var enemyX = (j * 40) + enemyPadding / 2;
        var enemyY = (i * 40) + enemyPadding / 1.5;
        b.x = enemyX;
        b.y = enemyY;
        ctx.beginPath();
        ctx.fillStyle = "rgb(0, 0, 255)";
        ctx.strokeStyle = "rgb(0, 0, 0)";
        ctx.rect(enemyX += 1, enemyY, enemyWidth, enemyHeight);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();

        if (b.y + enemyHeight >= canvas.height) {
          b.x = (j * 40) + enemyPadding / 2;
          b.y = (i * 40) + enemyPadding / 1.5;
          lives--;
        }

        for (var a = 0; a < bullets.length; a++) {
          var w = bullets[a];
          if (w.x + w.w >= b.x && w.x <= b.x + enemyWidth && w.y + w.h > b.y && w.y < b.y + enemyHeight) {
            bullets.splice(a, 1);
            b.alive = false;
            score += 20;
          }
        }
      }
    }
  }
}

function drawBullet() {
  for (var i = 0; i < bullets.length; i++) {
    var b = bullets[i];

    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillRect(b.x, b.y -= b.s, b.w, b.h);

    if (b.y < -b.h) {
      bullets.splice(i, 1);
    }
  }
}

function Player() {
  this.x = width / 2;
  this.h = 20;
  this.y = height - this.h;
  this.w = 15;
  this.fill = "rgb(255, 255, 255)";
  this.speed = 4;

  this.render = function(ctx, rx, ry, rw, rh, col, rspeed) {
    ctx.fillStyle = col;
    ctx.fillRect(rx, ry, rw, rh);
  }
}

var player = new Player();

function draw() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, width, height);

  drawText();
  drawEnemy();
  drawBullet();

  player.render(ctx, player.x, player.y, player.w, player.h, player.fill, player.speed);

  if (leftPressed && player.x >= 0) {
    player.x -= player.speed;
  } else if (rightPressed && player.x < width - player.w) {
    player.x += player.speed;
  }

  if (upPressed && wait <= 0) {
    bullets.push({
      "x": player.x + player.w / 4,
      "y": player.y,
      "w": bulletWidth,
      "h": bulletHeight,
      "s": bulletSpeed
    });
    //wait = 25;
  }
}

function update() {
  if (wait > 0) {
    wait--;
  }
  time++;
  draw();
  requestAnimationFrame(update);
}
update();

<!DOCTYPE html>
<html>

<head>
  <title> Space Invaders </title>
  <style>
    body {
      margin: 10px 0px 0px 10px;
      font-family: Helvetica;
    }
  </style>
</head>

<body>
  <canvas width="500" height="500" id="canvas"></canvas> <br> <br>
  <script src="space_invaders.js"></script>
</body>

</html>

Answer 1

每次获得入侵者的初始位置。你不把它保存在数组中。查看解决方案 jsfiddle

var enemyX = b.x || (j*40)+enemyPadding/2;
var enemyY = b.y || (i*40)+enemyPadding/1.5;
b.x = enemyX;
b.y = enemyY+1;
ctx.beginPath();
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.rect(b.x, b.y, enemyWidth, enemyHeight);
ctx.stroke();
ctx.fill();
ctx.closePath();