使用 JavaScript 实现贪吃蛇游戏

贪吃蛇是一种经典的小游戏，它在网页端也非常流行。在这篇文章中，我们将使用 JavaScript 来实现一个简单但有趣的贪吃蛇游戏。

游戏规则

贪吃蛇游戏的规则很简单：玩家控制一条蛇，在屏幕上移动并吃掉食物，每吃掉一个食物，蛇就会变长一节，并得分加一。如果蛇撞到了自己的身体或者碰到了屏幕边缘，游戏就结束了。

实现步骤

我们可以通过以下几个步骤来实现贪吃蛇游戏：

创建 HTML 页面布局
加载 CSS 样式
实现蛇和食物的绘制
实现蛇的移动
实现游戏结束判断
实现分数计算

接下来，我们将逐步介绍每个步骤的实现细节。

创建 HTML 页面布局

首先，我们需要创建一个 HTML 页面，用于展示游戏内容。为了方便布局和操作，我们可以采用一定的技巧，比如将游戏画布放入一个 div 容器中，并设置宽高和边框。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="container">
      <canvas id="canvas"></canvas>
    </div>

    <script src="snake.js"></script>
  </body>
</html>

加载 CSS 样式

接下来，我们需要为页面添加 CSS 样式，以便美化游戏界面。我们可以设置容器的宽度、边框和背景色，并将画布置于容器中央。注意，为了能够正确地显示画布，我们还需要将画布的样式设置为 display: block; 和 margin: auto;。

#container {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

#canvas {
  display: block;
  margin: auto;
}

实现蛇和食物的绘制

在 JavaScript 中，我们可以使用 Canvas API 来进行图形绘制。为了实现贪吃蛇游戏，我们需要通过 Canvas API 绘制蛇和食物。

绘制蛇

首先，我们需要定义一个蛇的数据结构，用于存储蛇的位置和长度。在蛇的初始化阶段，我们可以随机生成一条蛇，并将其绘制在画布上。

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// 定义蛇的数据结构
const snake = {
  direction: "right",
  body: [
    { x: 4, y: 0 },
    { x: 3, y: 0 },
    { x: 2, y: 0 },
    { x: 1, y: 0 },
    { x: 0, y: 0 },
  ],
};

// 绘制蛇
function drawSnake() {
  for (let i = 0; i < snake.body.length; i++) {
    const { x, y } = snake.body[i];
    context.fillStyle = "#333";
    context.fillRect(x * 10, y * 10, 10, 10);
    context.strokeStyle = "#fff";
    context.strokeRect(x * 10, y * 10, 10, 10);
  }
}

绘制

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/887

js实现贪吃蛇小游戏（容易理解）