基于原生js打造贪吃蛇游戏：品味经典，重温乐趣

2022-11-03 03:42:38

在现代浏览器中重现贪吃蛇：使用原生JavaScript重温经典

一、构建项目

我们从头开始，一步步构建贪吃蛇游戏。

首先，创建一个 HTML 文件（index.html）并添加以下代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="script.js"></script>
</body>
</html>

接下来，创建一个 JavaScript 文件（script.js）并添加以下代码：

// 获取画布元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置画布尺寸
canvas.width = 500;
canvas.height = 500;

// 定义贪吃蛇的初始位置
const snake = [
  { x: 200, y: 200 },
  { x: 190, y: 200 },
  { x: 180, y: 200 },
  { x: 170, y: 200 },
  { x: 160, y: 200 },
];

// 定义食物的初始位置
let food = {
  x: Math.floor(Math.random() * 490),
  y: Math.floor(Math.random() * 490),
};

// 定义游戏状态
let gameStatus = "playing";

// 添加键盘事件监听器
document.addEventListener("keydown", (e) => {
  switch (e.keyCode) {
    case 37: // 左
      snakeDirection = "left";
      break;
    case 38: // 上
      snakeDirection = "up";
      break;
    case 39: // 右
      snakeDirection = "right";
      break;
    case 40: // 下
      snakeDirection = "down";
      break;
  }
});

// 定义游戏循环函数
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

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

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

  // 更新贪吃蛇的位置
  for (let i = snake.length - 1; i > 0; i--) {
    snake[i].x = snake[i - 1].x;
    snake[i].y = snake[i - 1].y;
  }

  // 根据键盘事件监听器中的snakeDirection值更新贪吃蛇头的位置
  switch (snakeDirection) {
    case "left":
      snake[0].x -= 10;
      break;
    case "up":
      snake[0].y -= 10;
      break;
    case "right":
      snake[0].x += 10;
      break;
    case "down":
      snake[0].y += 10;
      break;
  }

  // 判断贪吃蛇是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    // 贪吃蛇吃到食物，食物的位置随机改变，贪吃蛇的长度增加
    food.x = Math.floor(Math.random() * 490);
    food.y = Math.floor(Math.random() * 490);
    snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y });
  }

  // 判断贪吃蛇是否撞到自己或撞到墙上
  if (
    snake[0].x < 0 ||
    snake[0].x > canvas.width - 10 ||
    snake[0].y < 0 ||
    snake[0].y > canvas.height - 10 ||
    snake.some((segment, i) => i !== 0 && segment.x === snake[0].x && segment.y === snake[0].y)
  ) {
    // 贪吃蛇撞到自己或撞到墙上，游戏结束
    gameStatus = "over";
  }

  // 判断游戏状态，如果是"over"则结束游戏，否则继续游戏循环
  if (gameStatus === "over") {
    alert("游戏结束！");
    return;
  }

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

// 启动游戏循环
requestAnimationFrame(gameLoop);