用HTML5 Canvas和JavaScript创造经典贪吃蛇游戏

前端

2022-12-22 23:18:21

使用 HTML5 Canvas 和 JavaScript 构建经典的贪吃蛇游戏

1. 简介

在电子游戏历史的浩瀚星河中，贪吃蛇无疑是一款常青藤，其经久不衰的魅力穿越了时代，征服了无数玩家的心。无论是苦闷的课堂，还是漫漫的旅途，贪吃蛇总能让我们乐此不疲，沉醉其中。

今天，我们将共同踏上创建经典贪吃蛇游戏的奇妙旅程，使用 HTML5 Canvas 和 JavaScript 作为我们的画笔，一步一步描绘出这款令人着迷的电子游戏。

2. 游戏机制

贪吃蛇是一款经典的街机游戏，其规则简单明了：控制一条贪吃的蛇，通过吞噬屏幕上的食物让其不断变长，同时避免与墙壁或自身身体发生碰撞。随着蛇的身体越长，游戏速度也会随之加快，为玩家带来更大的挑战。

3. 技术准备

在开启编码之旅之前，让我们确保我们已经具备了必要的技术装备：

文本编辑器（如 Visual Studio Code 或 Atom）
现代浏览器（如 Chrome 或 Firefox）
Node.js（用于运行游戏）

4. 创建游戏画布

万事开头难，首先，我们需创建一个 HTML5 Canvas 元素。Canvas 元素允许我们使用 JavaScript 在网页上绘制图形，将成为我们游戏的舞台。

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

5. 游戏初始化

接下来，我们需要初始化我们的游戏，包括设置游戏变量（例如蛇的位置和食物的位置）、创建游戏循环以及添加键盘事件监听器以控制蛇的移动。

// 设置游戏变量
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let snake = [
  {x: 200, y: 200},
  {x: 190, y: 200},
  {x: 180, y: 200},
  {x: 170, y: 200},
  {x: 160, y: 200}
];
let food = {x: 100, y: 100};

// 创建游戏循环
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制蛇
  snake.forEach((part) => {
    ctx.fillStyle = 'green';
    ctx.fillRect(part.x, part.y, 10, 10);
  });

  // 绘制食物
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, 10, 10);

  // 移动蛇
  const head = {
    x: snake[0].x + dx,
    y: snake[0].y + dy
  };

  // 检查蛇是否吃到食物
  if (head.x === food.x && head.y === food.y) {
    // 蛇吃到食物，增加蛇的身体长度
    snake.unshift(head);

    // 随机生成新的食物
    food = {
      x: Math.floor(Math.random() * canvas.width / 10) * 10,
      y: Math.floor(Math.random() * canvas.height / 10) * 10
    };
  } else {
    // 蛇没有吃到食物，移动蛇的身体
    snake.unshift(head);
    snake.pop();
  }

  // 检查蛇是否撞到墙壁或自己的身体
  if (head.x < 0 || head.x > canvas.width - 10 || head.y < 0 || head.y > canvas.height - 10 || snake.some((part) => part.x === head.x && part.y === head.y)) {
    // 蛇撞到了墙壁或自己的身体，游戏结束
    alert('游戏结束！');
    clearInterval(interval);
  }

  // 重新启动游戏循环
  interval = setInterval(gameLoop, 100);
}

// 添加键盘事件监听器
document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':
      dx = 0;
      dy = -10;
      break;
    case 'ArrowDown':
      dx = 0;
      dy = 10;
      break;
    case 'ArrowLeft':
      dx = -10;
      dy = 0;
      break;
    case 'ArrowRight':
      dx = 10;
      dy = 0;
      break;
  }
});

// 启动游戏
const interval = setInterval(gameLoop, 100);