从头开始实现 JavaScript 贪吃蛇游戏，让经典焕发新彩

2024-01-12 20:06:22

贪吃蛇，一个经典的电子游戏，风靡了无数人的童年。今天，让我们用 JavaScript 重新编写这个游戏，让它焕发新的光彩。

1. 游戏设计

在开始编写代码之前，我们需要先设计游戏的基本规则和玩法。

贪吃蛇由一个蛇头和若干个蛇身组成。
蛇头可以上下左右移动，每次只能移动一个格子。
蛇身会跟随蛇头移动，并不能穿过自身。
游戏中存在食物，蛇吃掉食物后会变长。
如果蛇头撞到墙壁或自身，游戏结束。

2. HTML5 canvas 元素

HTML5 canvas 元素是一个强大的绘图工具，可以让我们在网页上创建动态图形。我们将使用 canvas 元素来创建贪吃蛇游戏的画面。

<canvas id="canvas" width="400px" height="300px"></canvas>

3. JavaScript 代码

接下来，让我们编写 JavaScript 代码来实现贪吃蛇游戏的逻辑。

3.1 初始化

// 获取 canvas 元素
const canvas = document.getElementById("canvas");

// 获取 canvas 上下文
const ctx = canvas.getContext("2d");

// 定义游戏变量
const cellSize = 10; // 单元格大小
const boardWidth = canvas.width / cellSize; // 游戏区域宽度
const boardHeight = canvas.height / cellSize; // 游戏区域高度
const snake = [
  { x: boardWidth / 2, y: boardHeight / 2 }, // 蛇头初始位置
];
const food = { x: 0, y: 0 }; // 食物初始位置
let direction = "right"; // 蛇头初始移动方向
let score = 0; // 得分

3.2 游戏循环

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制游戏区域
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制蛇身
  ctx.fillStyle = "green";
  snake.forEach((segment) => {
    ctx.fillRect(segment.x * cellSize, segment.y * cellSize, cellSize, cellSize);
  });

  // 绘制食物
  ctx.fillStyle = "red";
  ctx.fillRect(food.x * cellSize, food.y * cellSize, cellSize, cellSize);

  // 更新蛇头位置
  switch (direction) {
    case "right":
      snake.unshift({ x: snake[0].x + 1, y: snake[0].y });
      break;
    case "left":
      snake.unshift({ x: snake[0].x - 1, y: snake[0].y });
      break;
    case "up":
      snake.unshift({ x: snake[0].x, y: snake[0].y - 1 });
      break;
    case "down":
      snake.unshift({ x: snake[0].x, y: snake[0].y + 1 });
      break;
  }

  // 判断是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    // 得分增加
    score++;

    // 重新生成食物
    food = { x: Math.floor(Math.random() * boardWidth), y: Math.floor(Math.random() * boardHeight) };

    // 蛇身增长
    snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y });
  }

  // 判断是否撞墙或撞自身
  if (
    snake[0].x < 0 ||
    snake[0].x >= boardWidth ||
    snake[0].y < 0 ||
    snake[0].y >= boardHeight ||
    snake.some((segment, index) => index > 0 && segment.x === snake[0].x && segment.y === snake[0].y)
  ) {
    // 游戏结束
    alert("Game Over!");
    location.reload(); // 刷新页面重新开始游戏
  }

  // 继续游戏循环
  requestAnimationFrame(gameLoop);
}

3.3 事件监听器

// 添加键盘事件监听器
document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowRight":
      direction = "right";
      break;
    case "ArrowLeft":
      direction = "left";
      break;
    case "ArrowUp":
      direction = "up";
      break;
    case "ArrowDown":
      direction = "down";
      break;
  }
});

4. 运行游戏

现在，我们已经编写好了 JavaScript 代码。接下来，我们需要将代码放入 HTML 文件中并运行游戏。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="400px" height="300px"></canvas>

  <script src="script.js"></script>
</body>
</html>

将 HTML 文件保存为贪吃蛇游戏贪吃蛇.html，然后在浏览器中打开该文件。你就可以看到贪吃蛇游戏正在运行了。

5. 结语

我们从头开始用 JavaScript 编写了贪吃蛇游戏。虽然这个游戏看起来很简单，但它涵盖了游戏开发的基本知识，包括游戏设计、图形绘制、游戏逻辑和事件处理。通过编写这个游戏，你对 JavaScript 有了更深入的理解，也对游戏编程有了初步的认识。希望你能继续探索游戏开发的世界，创造出更多有趣的游戏！