JavaScript写个贪吃蛇小游戏(超详细)

2023年5月28日上午11:06 • JavaScript

下面是“JavaScript写个贪吃蛇小游戏(超详细)”的完整攻略。

1. 准备工作

在开始编写贪吃蛇游戏前，我们需要准备以下工具和资源：

一个编辑器，比如VSCode。
一些基础的HTML、CSS和JS知识。
贪吃蛇游戏的素材，可以从互联网上下载。

2. 游戏介绍

贪吃蛇游戏是经典的像素游戏之一，游戏规则很简单：玩家控制蛇的移动，蛇吃到食物后会变长，玩家需要避免蛇头碰到游戏边界或撞到蛇的身体，否则游戏结束。

3. 编写HTML和CSS

在编写游戏功能前，我们先来编写游戏的界面和样式。

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇小游戏</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="snake.js"></script>
</body>
</html>

CSS部分：

body {
  margin: 0;
  padding: 0;
  background-color: #333;
}

canvas {
  display: block;
  margin: 0 auto;
  background-color: #ccc;
  border: 1px solid #999;
}

这里我们使用了一个canvas元素来绘制游戏画面。在CSS中，我们将canvas元素居中并设置了一些基础样式。

4. 编写JS功能

4.1 绘制蛇、食物和游戏边界

首先，我们需要在JavaScript中绘制出蛇、食物和游戏边界。

// 获取canvas元素和绘图上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 定义游戏区域的宽度和高度
const gameWidth = 400;
const gameHeight = 400;

// 定义单元格的宽度和高度
const cellWidth = 10;
const cellHeight = 10;

// 计算出单元格的总数
const horizontalCells = gameWidth / cellWidth;
const verticalCells = gameHeight / cellHeight;

// 绘制游戏边界
ctx.strokeStyle = '#999';
ctx.strokeRect(0, 0, gameWidth, gameHeight);

// 绘制一个单元格
function drawCell(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);
}

// 绘制蛇
let snake = [
  {x: 6, y: 5},
  {x: 5, y: 5},
  {x: 4, y: 5}
];

snake.forEach((cell) => {
  drawCell(cell.x, cell.y, '#EEE');
});

// 绘制食物
let food = {x: 10, y: 10};
drawCell(food.x, food.y, '#F00');

在上面的代码中，我们使用canvas的getContext('2d')方法获取了绘图上下文，并定义了常量gameWidth、gameHeight、cellWidth和cellHeight。接着我们使用strokeRect()方法绘制了游戏边界，并使用drawCell()方法绘制了一个单元格。最后，我们定义了一个蛇数组和一个食物对象，并使用drawCell()方法绘制了它们。

示例1：你可以尝试修改蛇和食物的位置，观察它们的位置是否发生了变化。

4.2 蛇的移动

接下来，我们实现蛇的移动功能。

// 定义蛇的移动方向
let direction = 'right';

// 蛇的移动函数
function moveSnake() {
  // 让蛇的身体每个单元格依次向前移动一格
  for (let i = snake.length - 1; i > 0; i--) {
    snake[i].x = snake[i - 1].x;
    snake[i].y = snake[i - 1].y;
  }

  // 根据蛇的移动方向让蛇头移动一格
  if (direction === 'right') {
    snake[0].x++;
  } else if (direction === 'left') {
    snake[0].x--;
  } else if (direction === 'up') {
    snake[0].y--;
  } else if (direction === 'down') {
    snake[0].y++;
  }
}

在上面的代码中，我们定义了一个direction变量来保存蛇的移动方向，并且编写了一个moveSnake()函数来实现蛇的移动。在moveSnake()函数中，我们让蛇的身体每个单元格依次向前移动一格，并且根据蛇的移动方向让蛇头移动一格。

示例2：你可以尝试修改direction变量的值，观察蛇的移动方向是否发生了变化。

4.3 游戏循环

游戏的核心是游戏循环，我们需要在每一帧中更新游戏状态并重绘游戏画面。

// 游戏循环
function gameLoop() {
  // 执行一次蛇的移动
  moveSnake();

  // 重绘游戏画面
  ctx.clearRect(0, 0, gameWidth, gameHeight);
  ctx.strokeStyle = '#999';
  ctx.strokeRect(0, 0, gameWidth, gameHeight);
  snake.forEach((cell) => {
    drawCell(cell.x, cell.y, '#EEE');
  });
  drawCell(food.x, food.y, '#F00');

  // 让游戏在下一帧继续执行
  requestAnimationFrame(gameLoop);
}

// 开始游戏循环
requestAnimationFrame(gameLoop);

在上面的代码中，我们编写了一个gameLoop()函数作为游戏循环的核心。在gameLoop()函数中，我们先执行了一次蛇的移动，然后使用clearRect()方法清空画布，接着重绘游戏边界、蛇和食物。

最后，我们使用requestAnimationFrame()方法让游戏在下一帧继续执行。