HTML5 Canvas贪吃蛇游戏开发实战：从零到可玩（附完整代码）
HTML5 Canvas贪吃蛇游戏开发实战：从零到可玩（附完整代码）
记得第一次接触贪吃蛇是在诺基亚3310上，那个像素风的小蛇让我着迷了好一阵子。如今作为前端开发者，用HTML5 Canvas重新实现这个经典游戏，既是对童年的致敬，也是检验基础功的好机会。本文将带你从零开始，用原生JavaScript构建一个完整的贪吃蛇游戏，重点解析Canvas绘图、游戏循环、碰撞检测等核心概念，最后还会分享几个提升游戏体验的实用技巧。
1. 环境准备与基础搭建
工欲善其事，必先利其器。我们先搭建最基本的HTML结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas贪吃蛇</title> <style> body { display: flex; flex-direction: column; align-items: center; background-color: #f0f0f0; } canvas { border: 2px solid #333; margin-top: 20px; } </style> </head> <body> <h1>贪吃蛇</h1> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="controls"> <button id="startBtn">开始游戏</button> <span id="score">得分: 0</span> </div> <script src="game.js"></script> </body> </html>关键点说明：
- 画布尺寸设为400x400像素，这是游戏的主战场
- 单独引入game.js文件保持代码整洁
- 简单的居中布局确保游戏在不同设备上都能正常显示
提示：建议使用VS Code的Live Server插件进行开发，可以实时看到修改效果
2. 游戏核心逻辑实现
2.1 初始化游戏状态
在game.js中，我们先定义游戏的基本元素：
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const boxSize = 20; // 每个方格的大小 const canvasSize = canvas.width; let snake = [{x: 10, y: 10}]; // 初始蛇身 let food = generateFood(); // 食物位置 let direction = {x: 1, y: 0}; // 初始移动方向 let score = 0; let gameSpeed = 150; // 游戏速度(毫秒) let gameInterval;食物生成函数的实现：
function generateFood() { // 确保食物不会出现在蛇身上 let newFood; do { newFood = { x: Math.floor(Math.random() * (canvasSize / boxSize)), y: Math.floor(Math.random() * (canvasSize / boxSize)) }; } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y)); return newFood; }2.2 游戏主循环
游戏的核心是不断更新状态并重绘画面：
function gameLoop() { updateSnake(); checkCollision(); drawGame(); } function startGame() { if (gameInterval) clearInterval(gameInterval); // 重置游戏状态 snake = [{x: 10, y: 10}]; direction = {x: 1, y: 0}; score = 0; document.getElementById('score').textContent = `得分: ${score}`; gameInterval = setInterval(gameLoop, gameSpeed); } document.getElementById('startBtn').addEventListener('click', startGame);2.3 绘制游戏元素
Canvas绘图是游戏视觉表现的关键：
function drawGame() { // 清空画布 ctx.clearRect(0, 0, canvasSize, canvasSize); // 绘制蛇身 ctx.fillStyle = '#4CAF50'; snake.forEach(segment => { ctx.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize); ctx.strokeStyle = '#45a049'; ctx.strokeRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize); }); // 绘制食物 ctx.fillStyle = '#f44336'; ctx.beginPath(); ctx.arc( food.x * boxSize + boxSize/2, food.y * boxSize + boxSize/2, boxSize/2, 0, Math.PI * 2 ); ctx.fill(); }3. 游戏机制深度解析
3.1 蛇身移动算法
贪吃蛇的移动看似简单，实则有几个关键细节：
function updateSnake() { const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; snake.unshift(head); // 检查是否吃到食物 if (head.x === food.x && head.y === food.y) { score += 10; document.getElementById('score').textContent = `得分: ${score}`; food = generateFood(); // 每得100分加速一次 if (score % 100 === 0) { gameSpeed = Math.max(50, gameSpeed - 10); clearInterval(gameInterval); gameInterval = setInterval(gameLoop, gameSpeed); } } else { snake.pop(); // 没吃到食物则移除尾部 } }3.2 碰撞检测系统
完善的碰撞检测是游戏体验的保障：
function checkCollision() { const head = snake[0]; // 撞墙检测 if (head.x < 0 || head.x >= canvasSize/boxSize || head.y < 0 || head.y >= canvasSize/boxSize) { gameOver(); } // 自撞检测（跳过头部） for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver(); } } } function gameOver() { clearInterval(gameInterval); alert(`游戏结束！最终得分: ${score}`); }3.3 方向控制优化
处理方向输入时需要避免180度急转：
document.addEventListener('keydown', e => { // 防止反方向移动 if (e.key === 'ArrowUp' && direction.y === 0) { direction = {x: 0, y: -1}; } else if (e.key === 'ArrowDown' && direction.y === 0) { direction = {x: 0, y: 1}; } else if (e.key === 'ArrowLeft' && direction.x === 0) { direction = {x: -1, y: 0}; } else if (e.key === 'ArrowRight' && direction.x === 0) { direction = {x: 1, y: 0}; } });4. 进阶功能与优化
4.1 添加游戏暂停功能
增强游戏的可操作性：
let isPaused = false; function togglePause() { isPaused = !isPaused; if (isPaused) { clearInterval(gameInterval); } else { gameInterval = setInterval(gameLoop, gameSpeed); } } // 添加暂停按钮到HTML document.addEventListener('keydown', e => { if (e.key === ' ') togglePause(); // 空格键暂停/继续 });4.2 实现游戏难度选择
让游戏更具挑战性：
<div class="controls"> <select id="difficulty"> <option value="200">简单</option> <option value="150" selected>中等</option> <option value="100">困难</option> </select> <button id="startBtn">开始游戏</button> <span id="score">得分: 0</span> </div>对应JavaScript修改：
document.getElementById('startBtn').addEventListener('click', () => { gameSpeed = parseInt(document.getElementById('difficulty').value); startGame(); });4.3 添加本地存储记录
保存最高分增加游戏动力：
function gameOver() { clearInterval(gameInterval); const highScore = localStorage.getItem('snakeHighScore') || 0; if (score > highScore) { localStorage.setItem('snakeHighScore', score); alert(`新纪录！得分: ${score}`); } else { alert(`游戏结束！得分: ${score} (最高分: ${highScore})`); } }5. 常见问题与调试技巧
在开发过程中，我遇到了几个典型问题：
蛇身闪烁问题：这是因为清空画布和重绘之间有延迟。解决方案是确保所有绘制操作在一次动画帧内完成，或者使用requestAnimationFrame替代setInterval。
方向输入延迟：快速按键时可能出现输入丢失。可以维护一个输入队列，而不是立即改变方向。
性能优化：当蛇身很长时，碰撞检测可能变慢。可以：
- 使用空间分区算法优化碰撞检测
- 对蛇身数组使用TypedArray提高性能
- 减少不必要的画布重绘
一个优化后的游戏循环示例：
function gameLoop(timestamp) { if (!lastTime) lastTime = timestamp; const delta = timestamp - lastTime; if (delta >= gameSpeed) { updateSnake(); checkCollision(); lastTime = timestamp - (delta % gameSpeed); } drawGame(); requestAnimationFrame(gameLoop); }6. 完整代码与扩展思路
最终的game.js完整代码如下：
// [前面所有代码片段的整合] // 为节省篇幅，这里不重复展示完整代码 // 完整项目可以放在GitHub等平台分享如果你想进一步扩展这个游戏，可以考虑：
- 添加不同类型的食物（加速、减速、加分等）
- 实现关卡系统，随着进度增加障碍物
- 添加音效和更精美的视觉效果
- 支持触摸控制移动端游玩
- 实现多人对战模式
我在实际开发中发现，Canvas的ctx.save()和ctx.restore()在管理绘图状态时非常有用，特别是当需要临时修改填充样式或变换矩阵时。另外，使用window.requestAnimationFrame可以实现更流畅的动画效果，特别是在高刷新率显示器上。