canvas 实现贪吃蛇，在浏览器中尽享复古乐趣

2023-04-11 10:26:17

时光倒流，重温经典：用Canvas和JavaScript制作贪吃蛇游戏

怀旧之风盛行，经典8位机游戏再次受到了追捧。这些看似简单的游戏承载着无数人的童年回忆，为我们带来了无尽的欢乐。今天，我们将踏上一段穿越时空的旅程，用Canvas和JavaScript重现一款经典之作——贪吃蛇。准备好踏上这段激动人心的冒险之旅了吗？

一、绘出我们的贪吃蛇

就像搭建舞台一样，Canvas是贪吃蛇游戏的基石。这个HTML5元素专为2D绘图而生，它将帮助我们赋予贪吃蛇生命。通过Canvas的绘图功能，我们可以用方形格子组建一条蜿蜒的贪吃蛇。看到贪吃蛇的像素化身影在屏幕上出现，是不是有种回到童年的感觉？

二、赋予贪吃蛇生命力

仅仅有形象还不够，我们需要赋予贪吃蛇灵魂，让它动起来。JavaScript扮演着操盘手的角色，我们通过JavaScript代码控制贪吃蛇的移动，让它听从玩家的指令，向各个方向游走。每一步，贪吃蛇都在屏幕上留下蜿蜒的轨迹，就像儿时记忆中那样。

定时器在这里发挥着至关重要的作用，它就像一个不懈的鼓点，促使贪吃蛇不断前进。通过定时器，贪吃蛇的移动变得流畅自然，永不停息。

三、增加食物和障碍物

贪吃蛇最爱食物了。为了满足它的口腹之欲，我们需要在地图上随机生成食物，让贪吃蛇四处寻觅，大快朵颐。

为了增加游戏难度和趣味性，障碍物也应运而生。这些墙壁、岩石、树木等阻碍物会阻挡贪吃蛇的前进，迫使它小心谨慎地避让。食物和障碍物的出现，让游戏更加生动有趣。

四、编写游戏逻辑

碰撞检测是游戏逻辑的核心。我们需要编写代码来检测贪吃蛇是否与食物或障碍物发生了碰撞。如果碰撞发生，我们就需要采取相应行动，例如增加贪吃蛇的身体长度、结束游戏等。

贪吃蛇游戏也有它的结束条件。当贪吃蛇撞到障碍物或自身时，游戏就会宣告结束。我们需要在代码中定义游戏结束的条件，并编写代码来处理游戏结束后的情况，例如显示游戏结束画面、记录玩家得分等。

五、添加声音和特效

为了提升游戏体验，声音和特效必不可少。当贪吃蛇吃到食物时，我们可以播放吃东西的声音；当贪吃蛇撞到障碍物时，我们可以播放撞击的声音；当游戏结束时，我们可以播放游戏结束的音乐。这些声音为游戏注入了活力，让玩家更加身临其境。

特效也为游戏增添了魅力。贪吃蛇移动时留下的彩色轨迹、吃到食物时的闪烁和游戏结束时的动画效果，都让画面更加赏心悦目，吸引玩家的眼球。

六、示例代码

在实际制作中，可以通过以下代码片段来实现上述功能：

// 创建Canvas元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 绘制贪吃蛇
const drawSnake = (snake) => {
  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(snake[i].x, snake[i].y, squareSize, squareSize);
  }
};

// 贪吃蛇移动
const moveSnake = () => {
  // 根据方向移动头部
  switch (direction) {
    case "up":
      head.y -= squareSize;
      break;
    case "down":
      head.y += squareSize;
      break;
    case "left":
      head.x -= squareSize;
      break;
    case "right":
      head.x += squareSize;
      break;
  }

  // 将头部添加到贪吃蛇数组中
  snake.unshift(head);

  // 如果吃到食物，增加身体长度
  if (head.x === food.x && head.y === food.y) {
    foodEaten = true;
    tailSize++;
  } else {
    // 如果没有吃到食物，移除尾部
    snake.pop();
  }
};

// 检测碰撞
const checkCollision = () => {
  // 检测与自身碰撞
  for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      return true;
    }
  }

  // 检测与障碍物碰撞
  for (let i = 0; i < obstacles.length; i++) {
    if (head.x === obstacles[i].x && head.y === obstacles[i].y) {
      return true;
    }
  }

  // 检测与墙壁碰撞
  if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    return true;
  }

  return false;
};