躲避小行星：让您的手指动起来！

2024-01-12 02:50:57

躲避小行星是一款令人上瘾的游戏，让您可以在广袤的星际空间中尽情躲避飞来的小行星。现在，我们将使用强大的 Canvas 元素和 JavaScript 的魔力，打造这款经典街机游戏的现代版本。

创建游戏画布

我们的游戏将以 Canvas 元素为舞台，提供了一个灵活且功能强大的绘制区域。使用 JavaScript，我们将在画布上创建一系列对象和背景，让玩家沉浸在星际环境中。

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

定义玩家飞船

作为游戏的主角，玩家的飞船是至关重要的。我们使用一个圆圈来表示飞船，并赋予其响应用户输入的能力。

const player = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 20,
  speed: 5,
  angle: 0,
  moving: false,
};

addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp":
      player.moving = true;
      player.angle = Math.PI * 1.5;
      break;
    case "ArrowDown":
      player.moving = true;
      player.angle = Math.PI * 0.5;
      break;
    case "ArrowLeft":
      player.moving = true;
      player.angle = Math.PI;
      break;
    case "ArrowRight":
      player.moving = true;
      player.angle = 0;
      break;
  }
});

生成小行星

小行星是游戏的挑战所在。我们使用随机生成器创建一系列大小和速度各异的小行星，为玩家带来无穷无尽的躲避挑战。

const asteroids = [];

for (let i = 0; i < 10; i++) {
  const asteroid = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 20 + 10,
    speed: Math.random() * 5 + 1,
    angle: Math.random() * 2 * Math.PI,
  };
  asteroids.push(asteroid);
}

游戏循环

使用 requestAnimationFrame 函数，我们创建了一个流畅的游戏循环，负责更新游戏状态并渲染画面。每一帧，我们更新玩家和小行星的位置，检查碰撞，并绘制所有游戏元素。

function gameLoop() {
  requestAnimationFrame(gameLoop);

  // 更新玩家位置
  if (player.moving) {
    player.x += player.speed * Math.cos(player.angle);
    player.y += player.speed * Math.sin(player.angle);
  }

  // 更新小行星位置
  asteroids.forEach((asteroid) => {
    asteroid.x += asteroid.speed * Math.cos(asteroid.angle);
    asteroid.y += asteroid.speed * Math.sin(asteroid.angle);
  });

  // 检测碰撞
  asteroids.forEach((asteroid) => {
    const dx = player.x - asteroid.x;
    const dy = player.y - asteroid.y;
    const distance = Math.sqrt(dx * dx + dy * dy);

    if (distance < player.radius + asteroid.radius) {
      alert("游戏结束！");
    }
  });

  // 绘制游戏画面
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制玩家
  ctx.beginPath();
  ctx.arc(player.x, player.y, player.radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();

  // 绘制小行星
  asteroids.forEach((asteroid) => {
    ctx.beginPath();
    ctx.arc(asteroid.x, asteroid.y, asteroid.radius, 0, 2 * Math.PI);
    ctx.fillStyle = "gray";
    ctx.fill();
  });
}

gameLoop();