手把手教你使用HTML、CSS和JS搭建贪吃蛇游戏，一看就懂！

2023-06-26 20:07:52

贪吃蛇编程教程：用前端技术打造经典游戏

简介

准备好踏上编程之旅了吗？让我们以经典的贪吃蛇游戏为起点，探索前端开发的奇妙世界。我们将使用HTML、CSS和JavaScript这三个基本元素，打造一款无需庞大代码库的贪吃蛇小游戏。

步骤 1：设置 HTML 框架

我们的旅程始于一个HTML文件，它将作为游戏的骨架。创建一个名为"index.html"的新文件，并输入以下代码：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script src="script.js"></script>
</body>
</html>

这个HTML文件包含了创建游戏画布和加载JavaScript脚本的必要元素。

步骤 2：编写 JavaScript 逻辑

接下来，让我们创建"script.js"文件，它将包含游戏的逻辑。输入以下JavaScript代码：

// 定义画布和绘图上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 定义贪吃蛇
let snake = [
  {x: 200, y: 200},
  {x: 190, y: 200},
  {x: 180, y: 200},
  {x: 170, y: 200},
  {x: 160, y: 200},
];

// 定义食物
let food = {
  x: Math.floor(Math.random() * canvas.width),
  y: Math.floor(Math.random() * canvas.height),
};

// 定义方向
let dx = 10;
let dy = 0;

// 定义游戏状态
let gameOver = false;

// 定义游戏循环
function gameLoop() {
  // 循环结束条件：游戏结束
  if (gameOver) {
    return;
  }

  // 清除画布
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

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

  // 绘制贪吃蛇
  for (let i = 0; i < snake.length; i++) {
    ctx.fillStyle = 'green';
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
  }

  // 移动贪吃蛇
  let head = {
    x: snake[0].x + dx,
    y: snake[0].y + dy
  };

  // 判断是否吃到食物
  if (head.x === food.x && head.y === food.y) {
    snake.unshift(head);

    // 随机生成新食物
    food = {
      x: Math.floor(Math.random() * canvas.width),
      y: Math.floor(Math.random() * canvas.height),
    };
  } else {
    snake.pop();
    snake.unshift(head);
  }

  // 判断是否撞墙或撞到自己
  if (head.x < 0 || head.x > canvas.width || head.y < 0 || head.y > canvas.height || snake.some((part) => part.x === head.x && part.y === head.y)) {
    gameOver = true;
  }

  // 延迟100毫秒再继续游戏循环
  setTimeout(gameLoop, 100);
}

// 添加键盘事件监听器
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;
  }
});

// 启动游戏循环
gameLoop();