贪吃蛇小游戏：用 canvas 实现的怀旧乐趣

前端

2024-01-19 23:04:53

贪吃蛇——经典小游戏的重生

在信息技术飞速发展的今天，我们很容易被最新最棒的游戏所吸引。然而，那些曾经陪伴我们度过无数欢乐时光的经典小游戏，总能勾起我们心中那份怀旧情结。贪吃蛇便是其中之一。

作为一款诞生于上世纪 70 年代的经典游戏，贪吃蛇凭借其简单的规则和令人着迷的玩法，风靡全球。如今，用现代技术重新制作这一经典，既是一次怀旧之旅，也是一次技术探索。

用 canvas 打造贪吃蛇游戏

为了重现贪吃蛇的经典体验，我们将使用 HTML5 中的 canvas 元素。canvas 是一种强大的绘图工具，它允许我们直接操作像素，非常适合创建 2D 游戏。

游戏逻辑

贪吃蛇的核心逻辑非常简单。一条蛇在棋盘上移动，吃掉食物使其变长。然而，如果蛇碰到自己或棋盘边缘，游戏就结束了。

游戏实现

用 canvas 实现贪吃蛇游戏需要以下步骤：

创建一个 canvas 元素并获取其上下文。
定义蛇、食物和棋盘的变量。
设置游戏循环，更新蛇的位置和状态。
处理用户输入，控制蛇的移动方向。
检测碰撞，结束游戏或添加食物。

示例代码

以下是一段用 JavaScript 实现贪吃蛇游戏核心逻辑的示例代码：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let snake = [{x: 10, y: 10}];
let food = {x: 20, y: 20};

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

  // 绘制蛇
  ctx.fillStyle = 'green';
  for (let i = 0; i < snake.length; i++) {
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
  }

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

function update() {
  // 移动蛇
  snake.unshift({x: snake[0].x + dx, y: snake[0].y + dy});

  // 判断是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
    food.y = Math.floor(Math.random() * canvas.height / 10) * 10;
  } else {
    // 去掉蛇尾
    snake.pop();
  }
}

function loop() {
  update();
  draw();

  // 下一帧继续循环
  requestAnimationFrame(loop);
}

loop();