焕发童年趣味，畅玩原生JavaScript贪吃蛇小游戏

原生JavaScript抒写——贪吃蛇小游戏

前言

前端开发的核心逻辑思维，莫过于就是对JavaScript的掌握了，不管是小程序还是主流框架都是在原生JavaScript的基础上延伸和简便，因此原生JavaScript非常适合初学者进行入门练习。所以，本篇博文将介绍如何使用原生JavaScript代码来创建一个简单的贪吃蛇游戏，让读者在学习的同时也能找回童年的乐趣。

1. 准备工作

在开始编码之前，我们需要准备以下工具：

• 一个文本编辑器（如VS Code、Atom等）
• 一个浏览器（如Chrome、Firefox等）
• 一个JavaScript库（如jQuery、Three.js等）

2. 创建游戏画布

首先，我们需要创建一个游戏画布，它将作为游戏的主要显示区域。我们可以使用HTML5的<canvas>元素来实现。

<canvas id="game-canvas" width="500px" height="500px"></canvas>

3. 初始化游戏变量

接下来，我们需要初始化一些游戏变量，这些变量将用于跟踪游戏的状态和行为。

const canvas = document.getElementById("game-canvas");
const ctx = canvas.getContext("2d");

const snake = [
  {x: 200, y: 200},
  {x: 190, y: 200},
  {x: 180, y: 200},
  {x: 170, y: 200},
  {x: 160, y: 200},
];

const food = {x: 300, y: 300};

let dx = 10;
let dy = 0;

4. 绘制游戏画面

接下来，我们需要绘制游戏画面，包括贪吃蛇、食物和得分。

function drawGame() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制贪吃蛇
  snake.forEach((part) => {
    ctx.fillStyle = "green";
    ctx.fillRect(part.x, part.y, 10, 10);
  });

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

  // 绘制得分
  ctx.fillStyle = "black";
  ctx.font = "16px Arial";
  ctx.fillText(`Score: ${score}`, 10, 20);
}

5. 更新游戏状态

接下来，我们需要更新游戏状态，包括贪吃蛇的位置、食物的位置和得分。

function updateGame() {
  // 更新贪吃蛇的位置
  const head = {
    x: snake[0].x + dx,
    y: snake[0].y + dy
  };

  snake.unshift(head);

  // 如果贪吃蛇吃到食物，则增加得分并生成新的食物
  if (head.x === food.x && head.y === food.y) {
    score++;
    generateFood();
  } else {
    snake.pop();
  }

  // 检测是否游戏结束
  if (head.x < 0 || head.x > canvas.width - 10 || head.y < 0 || head.y > canvas.height - 10 || snake.some((part) => head.x === part.x && head.y === part.y)) {
    alert("Game over!");
    location.reload();
  }
}

6. 绑定事件监听器

接下来，我们需要绑定事件监听器，以响应用户的输入。

document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      dx = 0;
      dy = -10;
      break;
    case "ArrowDown":
      dx = 0;
      dy = 10;
      break;
    case "ArrowLeft":
      dx = -10;
      dy = 0;
      break;
    case "ArrowRight":
      dx = 10;
      dy = 0;
      break;
  }
});

7. 运行游戏

最后，我们需要运行游戏。

function runGame() {
  drawGame();
  updateGame();
  setTimeout(runGame, 100);
}

runGame();

就这样，一个简单的贪吃蛇游戏就完成了。读者可以根据自己的需求进行修改和扩展，以创建更加丰富有趣的版本。