使用 Canvas 实现贪吃蛇小游戏
在这篇博客中，我们将介绍如何使用 HTML5 Canvas 和 JavaScript 实现一个简单的贪吃蛇（Snake）小游戏。这个项目是一个基础的游戏开发练习，它可以帮助你理解如何在 Canvas 上绘图、如何处理用户输入以及如何管理游戏状态。
项目结构
在开始之前，确保你的项目文件结构如下：
index.htmlindex.cssindex.js
HTML 部分
首先，我们在 index.html 中定义 Canvas 和一个重新开始按钮。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇游戏</title><link rel="stylesheet" href="index.css">
</head>
<body><canvas id="gameCanvas" width="400" height="400"></canvas><button id="restartButton" style="display: none;" onclick="restartGame()">重新开始</button><script src="index.js"></script>
</body>
</html>
CSS 部分
在 index.css 中，我们可以设置 Canvas 和按钮的样式。
/* styles.css */
body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}canvas {border: 1px solid #000;background-color: #fff;
}button {display: none;margin-top: 20px;padding: 10px 20px;font-size: 16px;cursor: pointer;position: absolute;
}
JavaScript 部分
接下来，我们在 script.js 中编写游戏的主要逻辑。
1. 初始化 Canvas 和变量
我们首先获取 Canvas 元素及其上下文，并定义游戏所需的一些变量。
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const restartButton = document.getElementById("restartButton");const gridSize = 20; // 格子大小
const rows = canvas.height / gridSize;
const cols = canvas.width / gridSize;
2. 初始化游戏
创建 initGame 函数来初始化游戏状态：
function initGame() {snake = [{ x: cols / 2, y: rows / 2 }, { x: cols / 2 + 1, y: rows / 2 }];food = {x: Math.floor(Math.random() * cols),y: Math.floor(Math.random() * rows),};direction = { x: 1, y: 0 };lastDirection = { x: 1, y: 0 };gameOver = false;restartButton.style.display = "none";gameLoop();
}
3. 绘制游戏元素
我们需要两个函数来绘制蛇和食物：
function drawCell(x, y, color) {ctx.fillStyle = color;ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);ctx.strokeStyle = "#000";ctx.lineWidth = 2; // 可以根据需要调整ctx.strokeRect(x * gridSize, y * gridSize, gridSize, gridSize);
}function drawSnake() {snake.forEach((part) => drawCell(part.x, part.y, "#409EFF"));
}function drawFood() {drawCell(food.x, food.y, "#E6A23C");
}
4. 更新蛇的位置
创建 updateSnake 函数来更新蛇的位置，并检查它是否吃到食物或撞到墙及自身：
function updateSnake() {const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };if (head.x === food.x && head.y === food.y) {food = {x: Math.floor(Math.random() * cols),y: Math.floor(Math.random() * rows),};} else {snake.pop();}snake.unshift(head);// 撞墙或撞到自己if (head.x < 0 ||head.x >= cols ||head.y < 0 ||head.y >= rows ||snake.slice(1).some((part) => part.x === head.x && part.y === head.y)) {gameOver = true;}lastDirection = direction;
}
5. 游戏循环
创建 gameLoop 函数来处理游戏的绘制和更新：
function gameLoop() {if (!gameOver) {ctx.clearRect(0, 0, canvas.width, canvas.height);drawFood();updateSnake();drawSnake();setTimeout(gameLoop, 100);} else {ctx.font = "100px Arial";ctx.fillStyle = "#F56C6C";ctx.fillText("Game Over", canvas.width / 4, canvas.height / 2);restartButton.style.display = "block"; // 显示重新开始按钮}
}
6. 处理用户输入
添加键盘事件监听来控制蛇的移动方向：
window.addEventListener("keydown", (event) => {switch (event.key) {case "ArrowUp":if (lastDirection.y === 0) direction = { x: 0, y: -1 };break;case "ArrowDown":if (lastDirection.y === 0) direction = { x: 0, y: 1 };break;case "ArrowLeft":if (lastDirection.x === 0) direction = { x: -1, y: 0 };break;case "ArrowRight":if (lastDirection.x === 0) direction = { x: 1, y: 0 };break;}
});
7. 重新开始游戏
最后，创建一个函数用于重新启动游戏：
function restartGame() {initGame(); // 重新启动游戏
}initGame(); // 启动游戏
总结
通过这篇博客，你学习了如何使用 HTML5 Canvas 和 JavaScript 来实现一个简单的贪吃蛇小游戏。我们展示了如何绘制游戏元素，处理用户输入，并管理游戏状态。希望这个项目能帮助你对游戏开发有更深入的理解，并激发你进行更多有趣的项目开发！
![[算法] 优先算法(二): 双指针算法(下)](https://img-blog.csdnimg.cn/direct/faa2316641af4e9abcb5e476dc352d2f.jpeg)
