儿童节，让编辑器变身贪吃蛇大乐园！

2024-01-18 12:52:06

各位小编码手们，儿童节到了，让咱们在编辑器的海洋中尽情玩耍吧！今天，我们就来把编辑器变成一个贪吃蛇大乐园，用代码的魔力重温儿时的经典回忆。

材料准备

JavaScript
HTML
CSS
你的想象力

代码之旅

1. 搭建游戏画布

首先，用 HTML 创建一个画布：

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

2. 贪吃蛇出场

接下来，用 JavaScript 定义贪吃蛇：

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

3. 食物登场

贪吃蛇怎么能没有食物呢？

let food = {
  x: Math.floor(Math.random() * 400),
  y: Math.floor(Math.random() * 400),
};

4. 控制贪吃蛇

用键盘控制贪吃蛇的移动：

document.addEventListener("keydown", (e) => {
  switch (e.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;
  }
});

5. 让贪吃蛇动起来

每隔一段时间，让贪吃蛇移动：

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

  // 更新蛇头位置
  snake[0].x += dx;
  snake[0].y += dy;

  // 检查是否吃到食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    // 吃到食物，蛇身变长
    snake.push({ x: food.x, y: food.y });

    // 重新生成食物
    food = {
      x: Math.floor(Math.random() * 400),
      y: Math.floor(Math.random() * 400),
    };
  }

  // 检查是否撞墙或自撞
  if (
    snake[0].x < 0 ||
    snake[0].x > 400 ||
    snake[0].y < 0 ||
    snake[0].y > 400 ||
    snake.slice(1).some((part) => part.x === snake[0].x && part.y === snake[0].y)
  ) {
    // 撞墙或自撞，游戏结束
    alert("游戏结束！");
    clearInterval(interval);
  }
}, 100);

6. 绘制贪吃蛇

最后，用 CSS 绘制贪吃蛇：

#myCanvas {
  background-color: white;
}

.snake {
  width: 10px;
  height: 10px;
  background-color: green;
}

.food {
  width: 10px;
  height: 10px;
  background-color: red;
}