用 JavaScript 编写网页版贪吃蛇：深入教程

2024-01-16 05:06:26

怀旧游戏的新生：用 JavaScript 编写贪吃蛇

在当今快节奏的数字化时代，怀旧游戏正以创新的方式强势回归。我们今天踏上了激动人心的旅程，将使用 JavaScript 在网页上重现经典的贪吃蛇游戏。

准备工作：

准备好我们的工具箱，包括基本的 JavaScript 和 HTML 知识，一个文本编辑器和一个浏览器。让我们开启创造我们自己的贪吃蛇冒险之旅吧！

创建画布：

首先，我们需要一个画布让贪吃蛇自由驰骋。在你的网页中添加以下 HTML 代码：

<canvas id="myCanvas" width="400px" height="400px"></canvas>

初始化 JavaScript：

现在，让我们初始化 JavaScript。我们将使用两个变量：ctx 用于在画布上绘制，以及 snake 用于存储贪吃蛇的位置和方向。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const snake = [
  { x: 200, y: 200 },
  { x: 190, y: 200 },
  { x: 180, y: 200 },
];

定义方块：

贪吃蛇是由一个个方块组成的。让我们创建一个方块函数，负责绘制和填充方块。

function drawSquare(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * 10, y * 10, 10, 10);
}

绘制贪吃蛇：

有了方块函数，我们就可以绘制贪吃蛇了。遍历贪吃蛇数组并绘制每个方块。

function drawSnake() {
  snake.forEach((part) => drawSquare(part.x, part.y, "green"));
}

移动贪吃蛇：

贪吃蛇通过改变蛇头（数组第一个元素）的位置来移动。添加键盘监听器响应按键，并相应地调整贪吃蛇的方向。

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowUp") snake[0].y--;
  else if (e.key === "ArrowDown") snake[0].y++;
  else if (e.key === "ArrowLeft") snake[0].x--;
  else if (e.key === "ArrowRight") snake[0].x++;
});

检查边界和自我碰撞：

为了防止贪吃蛇穿墙或自我碰撞，我们需要检查边界和贪吃蛇自身的碰撞。

function checkBoundaries() {
  if (snake[0].x < 0 || snake[0].x >= 40 || snake[0].y < 0 || snake[0].y >= 40) {
    alert("游戏结束！");
    location.reload();
  }
}

function checkSelfCollision() {
  for (let i = 4; i < snake.length; i++) {
    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
      alert("游戏结束！");
      location.reload();
    }
  }
}

游戏循环：

为了让游戏持续进行，我们需要创建一个游戏循环，负责更新贪吃蛇位置、检查边界和自我碰撞，以及重绘画布。

function gameLoop() {
  checkBoundaries();
  checkSelfCollision();
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSnake();
    gameLoop();
  }, 100);
}

gameLoop();

结论：

经过这一系列步骤，我们使用 JavaScript 成功创建了一个网页版的贪吃蛇游戏。随着编程技术的不断进步，对怀旧游戏的重新诠释仍在继续，为我们提供全新的视角和无穷的乐趣。希望这篇教程激发你编写自己的精彩游戏，探索计算机科学的无限可能性。

常见问题解答：