用 Canvas 实现的永恒经典，贪吃蛇小游戏的开发思路

前端

2023-12-19 00:54:03

前言

贪吃蛇，是一款风靡全球的经典休闲游戏。它以其简单的规则和极具挑战性的玩法吸引了无数玩家。而作为一名程序员，能够亲手实现这款游戏，无疑是一件有趣而有意义的事情。

游戏设计

在开始编码之前，我们先来设计一下游戏的原型。

游戏目标

贪吃蛇的目标很简单：控制贪吃蛇不断进食，使它变长。同时，避免撞到障碍物或自身的尾巴。

游戏规则

贪吃蛇可以上下左右移动。
每次移动，贪吃蛇都会在其尾部增加一个方块。
当贪吃蛇的头部触碰到食物时，食物会被吃掉，贪吃蛇的长度会增加一个方块。
当贪吃蛇的头部触碰到障碍物或自身的尾巴时，游戏结束。
分数由贪吃蛇吃掉的苹果数量决定。

游戏界面

贪吃蛇的游戏界面通常由以下部分组成：

游戏区域：用于显示贪吃蛇、食物和障碍物。
分数显示：显示玩家当前的分数。
游戏结束提示：当游戏结束时显示。

代码实现

HTML 结构

首先，我们创建一个简单的 HTML 页面，用于显示游戏。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

JavaScript 代码

接下来，我们编写 JavaScript 代码来实现游戏逻辑。

// 获取 Canvas 元素
const canvas = document.getElementById('canvas');

// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');

// 设置 Canvas 的宽和高
canvas.width = 500;
canvas.height = 500;

// 定义贪吃蛇的初始位置和方向
const snake = [
  { x: 200, y: 200 },
  { x: 190, y: 200 },
  { x: 180, y: 200 },
  { x: 170, y: 200 },
  { x: 160, y: 200 },
];
let dx = 10;
let dy = 0;

// 定义食物的位置
let food = {
  x: 300,
  y: 300
};

// 定义分数
let score = 0;

// 定义游戏结束标志
let gameOver = false;

// 绘制贪吃蛇
function drawSnake() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

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

  // 绘制贪吃蛇的头
  ctx.fillStyle = 'red';
  ctx.fillRect(snake[0].x, snake[0].y, 10, 10);
}

// 绘制食物
function drawFood() {
  ctx.fillStyle = 'blue';
  ctx.fillRect(food.x, food.y, 10, 10);
}

// 移动贪吃蛇
function moveSnake() {
  // 计算贪吃蛇的新位置
  const newHead = {
    x: snake[0].x + dx,
    y: snake[0].y + dy
  };

  // 将新位置添加到贪吃蛇的头部
  snake.unshift(newHead);

  // 如果贪吃蛇吃到食物，则增加分数并生成新的食物
  if (snake[0].x === food.x && snake[0].y === food.y) {
    score++;
    generateFood();
  } else {
    // 如果贪吃蛇没有吃到食物，则删除尾部
    snake.pop();
  }

  // 检测游戏是否结束
  if (snake[0].x < 0 || snake[0].x > canvas.width - 10 || snake[0].y < 0 || snake[0].y > canvas.height - 10 || checkCollision()) {
    gameOver = true;
  }
}

// 生成新的食物
function generateFood() {
  // 随机生成食物的位置
  food.x = Math.floor(Math.random() * (canvas.width - 10) / 10) * 10;
  food.y = Math.floor(Math.random() * (canvas.height - 10) / 10) * 10;

  // 检测食物的位置是否与贪吃蛇的身体重叠
  for (let i = 0; i < snake.length; i++) {
    if (food.x === snake[i].x && food.y === snake[i].y) {
      // 如果重叠，则重新生成食物
      generateFood();
    }
  }
}

// 检测贪吃蛇是否与自身的身体发生碰撞
function checkCollision() {
  for (let i = 4; i < snake.length; i++) {
    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
      return true;
    }
  }

  return false;
}

// 键盘事件监听
document.addEventListener('keydown', function(e) {
  // 键盘按下时改变贪吃蛇的方向
  if (e.keyCode === 37 && dx !== 10) {
    dx = -10;
    dy = 0;
  } else if (e.keyCode === 38 && dy !== 10) {
    dx = 0;
    dy = -10;
  } else if (e.keyCode === 39 && dx !== -10) {
    dx = 10;
    dy = 0;
  } else if (e.keyCode === 40 && dy !== -10) {
    dx = 0;
    dy = 10;
  }
});

// 游戏循环
function gameLoop() {
  if (!gameOver) {
    // 移动贪吃蛇
    moveSnake();

    // 绘制贪吃蛇和食物
    drawSnake();
    drawFood();

    // 更新分数
    document.getElementById('score').innerHTML = `Score: ${score}`;
  } else {
    // 游戏结束
    ctx.fillStyle = 'black';
    ctx.font = '30px Arial';
    ctx.fillText('Game Over', 150, 250);
  }

  // 100 毫秒后再次调用游戏循环
  setTimeout(gameLoop, 100);
}

// 启动游戏
gameLoop();