JavaScript用200行代码制作打飞机小游戏实例

这篇攻略将详细讲解如何使用 JavaScript 用 200 行代码制作一个简单的打飞机小游戏。我们将会使用 HTML5 Canvas 作为游戏画布，并构建游戏的逻辑和基本元素。整个游戏的框架代码只需要不到 200 行，但你可以根据需要自行扩展其功能。

1. 创建 HTML 画布

首先，在 HTML 代码中创建一个 Canvas 画布，并使用 CSS 样式设置其尺寸。

<canvas id="canvas" width="480" height="640" style="border:1px solid #000"></canvas>

2. 获取画布并渲染

JavaScript 中，我们可以通过使用 document.getElementById() 获取 Canvas 元素，并使用该元素的 getContext() 方法来获取 2D 渲染上下文来交互。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

我们现在可以使用 JavaScript 实现游戏逻辑和渲染，在 Canvas 画布上画出各种图形了。

3. 创建游戏对象

我们需要创建一些游戏对象来存储游戏中的元素。游戏中的元素包括：

• 玩家飞机（Player）：玩家可以控制的飞机
• 敌人飞机（Enemy）：会朝着玩家的方向飞行，并发射子弹
• 子弹（Bullet）：可以从玩家飞机或敌人飞机上发射出来

我们可以定义以下对象来表示这些元素：

// 玩家
const player = {
  x: canvas.width / 2,
  y: canvas.height - 50,
  width: 50,
  height: 50,
  speed: 10,
  color: "#0ff",
};

// 敌人
let enemies = [];

// 子弹
let bullets = [];

4. 绘制游戏元素

我们可以在每个游戏循环中调用 drawPlayer(), drawEnemies() 和 drawBullets() 来绘制游戏元素。

// 绘制玩家
function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

// 绘制敌人
function drawEnemies() {
  for (let enemy of enemies) {
    ctx.fillStyle = enemy.color;
    ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
  }
}

// 绘制子弹
function drawBullets() {
  for (let bullet of bullets) {
    ctx.fillStyle = bullet.color;
    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  }
}

5. 绑定键盘事件

我们需要为玩家飞机绑定键盘事件，以便控制飞机的移动。这里我们使用 addEventListener() 方法来监听键盘事件。

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowLeft") {
    player.x -= player.speed;
  } else if (event.key === "ArrowRight") {
    player.x += player.speed;
  } else if (event.key === " ") {
    bullets.push({
      x: player.x + player.width / 2 - 5,
      y: player.y - 10,
      width: 10,
      height: 10,
      color: "#f00",
      speed: -10,
    });
  }
});

6. 更新游戏状态

我们需要在每个游戏循环中更新游戏状态，包括飞机的位置、子弹的位置、敌机的位置，判断是否有飞机被摧毁等。这里我们使用 setInterval() 来控制游戏的帧率，以及 requestAnimationFrame() 来更新游戏界面。

function update() {
  // 更新玩家状态
  if (player.x <= 0) {
    player.x = 0;
  }
  if (player.x + player.width >= canvas.width) {
    player.x = canvas.width - player.width;
  }

  // 更新子弹状态
  bullets = bullets.filter(function (bullet) {
    bullet.y += bullet.speed;
    return bullet.y >= 0;
  });

  // 更新敌人状态
  for (let enemy of enemies) {
    enemy.x += enemy.speedX;
    enemy.y += enemy.speedY;

    // 判断敌人是否撞到玩家飞机
    if (enemy.x < player.x + player.width && enemy.x + enemy.width > player.x &&
      enemy.y < player.y + player.height && enemy.y + enemy.height > player.y
    ) {
      alert("GameOver");
      clearInterval(interval);
      return;
    }

    // 判断敌人是否被击毁
    bullets = bullets.filter(function (bullet) {
      if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x &&
        bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) {
        return false;
      }
      return true;
    });
  }
}

// 每秒更新 60 次
let interval = setInterval(function () {
  // 清空画面
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  update();
  drawPlayer();
  drawEnemies();
  drawBullets();
}, 1000 / 60);

7. 示例说明1

在上面的代码中，当用户按下空格键时，我们将在 bullets 数组中添加一颗新的子弹。而这些子弹是在游戏更新循环中绘制的。

if (event.key === " ") {
  bullets.push({
    x: player.x + player.width / 2 - 5,
    y: player.y - 10,
    width: 10,
    height: 10,
    color: "#f00",
    speed: -10,
  });
}

通过这个代码段，我们可以看到子弹是如何添加到 bullets 数组中，并使用不同的颜色和速度进行初始化的。这个子弹的初始位置是玩家飞机的正上方。

8. 示例说明2

我们在上面的游戏更新循环中使用了 setInterval() 来控制游戏的帧率。这里我们也可以使用 requestAnimationFrame() 来替代 setInterval() 来更新游戏界面。

function mainLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  update();
  drawPlayer();
  drawEnemies();
  drawBullets();

  window.requestAnimationFrame(mainLoop);
}

window.requestAnimationFrame(mainLoop);

通过这个代码段，我们可以看到 mainLoop() 函数是如何使用 requestAnimationFrame() 实现游戏的更新循环的。这种方式可以更好地与浏览器的帧率同步，并提供更好的游戏性能。