制作贪吃蛇游戏是学习html5小游戏开发的经典入门项目。它用到的核心技术包括canvas绘图、键盘事件监听和定时循环控制。下面带你一步步实现一个基础但完整的贪吃蛇小游戏。
1. 搭建页面结构与canvas画布
首先创建一个简单的HTML页面，引入Canvas元素作为游戏的显示区域。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>贪吃蛇游戏</title> <style> canvas { border: 1px solid #000; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="gameCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); </script> </body> </html>
2. 定义游戏基本变量
设置蛇的初始位置、移动方向、食物位置以及游戏格子大小。
// 格子大小 const gridSize = 20; // 蛇的初始位置（格子坐标） let snake = [ {x: 6, y: 5}, {x: 5, y: 5}, {x: 4, y: 5} ]; // 初始移动方向（右） let dx = 1; let dy = 0; // 食物位置 let food = {x: 10, y: 10}; // 游戏是否结束 let gameOver = false;
3. 绘制蛇和食物
使用Canvas的绘图API绘制方块来表示蛇身和食物。
立即学习“前端免费学习笔记（深入）”；
function draw() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); <p>// 绘制蛇 ctx.fillStyle = 'green'; snake.forEach(segment => { ctx.fillRect(segment.x <em> gridSize, segment.y </em> gridSize, gridSize, gridSize); });</p><p>// 绘制食物 ctx.fillStyle = 'red'; ctx.fillRect(food.x <em> gridSize, food.y </em> gridSize, gridSize, gridSize); }</p>
4. 控制蛇的移动
通过setInterval定时更新蛇的位置，并处理键盘方向键输入。
function moveSnake() { if (gameOver) return; <p>// 计算新头位置 const head = {x: snake[0].x + dx, y: snake[0].y + dy};</p><p>// 检查是否撞墙或撞自己 if ( head.x < 0 || head.x >= canvas.width / gridSize || head.y < 0 || head.y >= canvas.height / gridSize || snake.some(segment => segment.x === head.x && segment.y === head.y) ) { gameOver = true; alert("游戏结束！"); return; }</p><p>// 添加新头 snake.unshift(head);</p><p>// 检查是否吃到食物 if (head.x === food.x && head.y === food.y) { // 重新生成食物 food = { x: Math.floor(Math.random() <em> (canvas.width / gridSize)), y: Math.floor(Math.random() </em> (canvas.height / gridSize)) }; } else { // 没吃到就删尾 snake.pop(); } }</p><p>// 键盘控制 document.addEventListener('keydown', e => { switch(e.key) { case 'ArrowUp': if (dy !== 1) { dx = 0; dy = -1; } break; case 'ArrowDown': if (dy !== -1) { dx = 0; dy = 1; } break; case 'ArrowLeft': if (dx !== 1) { dx = -1; dy = 0; } break; case 'ArrowRight': if (dx !== -1) { dx = 1; dy = 0; } break; } });</p>
5. 启动游戏主循环
将绘制和移动逻辑组合进一个循环函数中，用setInterval控制帧率。
function gameLoop() { moveSnake(); draw(); } <p>// 每200毫秒执行一次（控制速度） setInterval(gameLoop, 200);</p>
调用draw()初始化画面，游戏即可运行。
基本上就这些。这个版本实现了贪吃蛇的核心机制：移动、吃食物、增长、碰撞检测。你可以在此基础上扩展功能，比如显示分数、加快速度、添加音效等。html5的Canvas非常适合做这类轻量级小游戏，掌握它对后续开发更有挑战性的项目很有帮助。