趣味经典之作：玩转简易版贪吃蛇！

2023-06-21 00:24:47

踏上趣味编程之旅：用HTML5、CSS3和JavaScript打造简易贪吃蛇游戏

基础布局：构建游戏画布

嘿，小伙伴们！准备好在HTML5、CSS3和JavaScript的魔杖下，重温经典的贪吃蛇游戏了吗？旅程的第一步，让我们为这场视觉盛宴搭建舞台。使用

<canvas id="game-canvas" width="500px" height="500px" style="background-color: #000"></canvas>

贪吃蛇的造型：用CSS美化小蛇

现在，让我们让贪吃蛇闪亮登场吧！CSS将赋予它生命，设置其颜色、大小和形状。想象一下，那灵动的蛇形在画布中穿梭，是不是已经跃跃欲试了呢？

#snake {
  width: 10px;
  height: 10px;
  background-color: #00FF00;
  position: absolute;
}

键盘控制：让贪吃蛇动起来

贪吃蛇有了造型，但它还不能动。是时候让JavaScript赋予它活力，使其响应键盘控制，实现灵活移动了。当玩家按下方向键时，小蛇就能向左、右、上、下灵活穿梭了。

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      snake.direction = "left";
      break;
    case "ArrowUp":
      snake.direction = "up";
      break;
    case "ArrowRight":
      snake.direction = "right";
      break;
    case "ArrowDown":
      snake.direction = "down";
      break;
  }
});

食物生成：小蛇的食物来源

贪吃蛇最爱什么？当然是食物啦！我们用JavaScript随机生成食物，让它们出现在画布的各个角落。食物可以是各种各样的形状和颜色，让游戏更具趣味性和挑战性。

function generateFood() {
  let food = {
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height)
  };

  return food;
}

碰撞检测：避免自相残杀

贪吃蛇在移动中难免会遇到障碍物或自身的身体。为了避免自相残杀，我们需要加入碰撞检测功能。当贪吃蛇的头碰到障碍物或自身身体时，游戏就会结束。这样，玩家就会更加小心地控制小蛇，避免不必要的失误。

function checkCollision() {
  // 自身碰撞检测
  for (let i = 4; i < snake.body.length; i++) {
    if (snake.body[i].x === snake.head.x && snake.body[i].y === snake.head.y) {
      return true;
    }
  }

  // 障碍物碰撞检测
  if (snake.head.x < 0 || snake.head.x >= canvas.width || snake.head.y < 0 || snake.head.y >= canvas.height) {
    return true;
  }

  return false;
}

分数统计：记录你的成就

在玩游戏的过程中，分数统计是非常重要的。我们用JavaScript来记录贪吃蛇吃掉的食物数量，并实时显示在游戏画布上。随着分数不断增加，玩家的成就感也会随之提升。

function updateScore() {
  score += 1;
  scoreElement.innerHTML = "分数：" + score;
}

游戏结束：挑战自我

当贪吃蛇的头碰到障碍物或自身身体时，游戏就会结束。这时，我们需要显示游戏结束的提示，并询问玩家是否要重新开始游戏。这样，玩家可以不断挑战自我，争取更高的分数。

function gameOver() {
  clearInterval(gameInterval);

  ctx.fillStyle = "white";
  ctx.font = "24px Arial";
  ctx.fillText("游戏结束", canvas.width / 2 - 100, canvas.height / 2);

  ctx.fillStyle = "yellow";
  ctx.font = "16px Arial";
  ctx.fillText("是否重新开始？按任意键继续", canvas.width / 2 - 100, canvas.height / 2 + 30);

  document.addEventListener("keydown", (e) => {
    location.reload();
  });
}