DIY 飞机大战游戏：缓解无聊时刻

前言

当无聊袭来时，玩一款自制游戏如何？让我们用 JavaScript 和 HTML5 编写一款经典的飞机大战游戏，让你在休闲时间尽享刺激。

游戏机制

我们的飞机大战游戏包含以下关键元素：

• 可移动的玩家飞机
• 可射击的子弹
• 敌机
• 分数跟踪

编写游戏

1. 画布设置

首先，我们需要创建一个 HTML5 画布元素：

<canvas id="gameCanvas" width="800" height="600"></canvas>

然后在 JavaScript 中获取画布元素：

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

2. 飞机控制

我们将使用事件监听器来控制玩家飞机：

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") player.x -= 10;
  else if (e.key === "ArrowRight") player.x += 10;
  else if (e.key === "Space") player.shoot();
});

3. 子弹射击

子弹将被存储在一个数组中：

const bullets = [];

player.shoot = () => {
  bullets.push({
    x: player.x,
    y: player.y,
  });
};

在游戏循环中更新子弹位置：

bullets.forEach((bullet) => {
  bullet.y -= 10;
});

4. 敌机生成

敌机会随机生成并移动：

const enemies = [];

setInterval(() => {
  enemies.push({
    x: Math.random() * canvas.width,
    y: 0,
  });
}, 1000);

enemies.forEach((enemy) => {
  enemy.y += 5;
});

5. 碰撞检测

当子弹击中敌机时，将它们从游戏中移除：

bullets.forEach((bullet) => {
  enemies.forEach((enemy) => {
    if (bullet.x > enemy.x && bullet.x < enemy.x + 50 && bullet.y > enemy.y && bullet.y < enemy.y + 50) {
      enemies.splice(enemies.indexOf(enemy), 1);
      bullets.splice(bullets.indexOf(bullet), 1);
    }
  });
});

6. 游戏循环

最后，我们将所有元素放入一个游戏循环中：

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 更新和渲染元素
  
  requestAnimationFrame(gameLoop);
}

gameLoop();

结语

恭喜你，现在你已经创建了一款基本的飞机大战游戏！虽然它可能不是最复杂的，但它是一个有趣的练习，可以展示 JavaScript 和 HTML5 的强大功能。