HTML5网页如何制作贪吃蛇游戏 HTML5网页小游戏开发实战-html教程-PHP中文网

HTML5网页如何制作贪吃蛇游戏 HTML5网页小游戏开发实战

雪夜

发布： 2025-10-27 15:56:02

原创

506人浏览过

用HTML5 Canvas实现贪吃蛇游戏需创建画布、定义蛇与食物逻辑、绘制图形、监听键盘控制方向、通过定时器驱动游戏循环并检测碰撞，最终完成基础玩法。

html5网页如何制作贪吃蛇游戏 html5网页小游戏开发实战

用HTML5制作贪吃蛇游戏是学习前端开发的绝佳实战项目，结合了Canvas绘图、键盘事件监听和定时器控制等核心技术。下面带你一步步实现一个基础但完整的贪吃蛇小游戏。

1. 搭建页面结构与Canvas画布

首先创建一个简单的HTML页面，引入Canvas用于绘制游戏画面：

<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
</script>

登录后复制

Canvas是HTML5中用于绘制图形的核心元素，这里设置画布为400×400像素，使用2D上下文进行绘图。

立即学习“前端免费学习笔记（深入）”；

2. 定义蛇和食物的基本逻辑

蛇可以用数组表示，每个元素是它的身体坐标；食物是一个随机位置的方块。

初始化蛇和方向：

let snake = [
  {x: 200, y: 200}, // 蛇头
  {x: 190, y: 200},
  {x: 180, y: 200}
];
let food = {x: 300, y: 300};
let dx = 10; // 每次移动距离
let dy = 0;
let speed = 150; // 移动间隔（毫秒）

登录后复制

蛇每次移动一个“格子”（例如10px），通过定时器不断更新位置。

3. 绘制蛇和食物

使用Canvas的绘图API来绘制蛇身和食物：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

查看详情

function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
<p>// 绘制蛇
ctx.fillStyle = 'green';
snake.forEach(part => {
ctx.fillRect(part.x, part.y, 10, 10);
});</p><p>// 绘制食物
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 10, 10);
}</p>

登录后复制

每次调用draw函数都会重绘画布，实现动画效果。

4. 控制蛇的移动与方向

监听键盘事件改变移动方向：

document.addEventListener('keydown', function(e) {
  switch(e.key) {
    case 'ArrowUp':
      if (dy === 0) { dx = 0; dy = -10; }
      break;
    case 'ArrowDown':
      if (dy === 0) { dx = 0; dy = 10; }
      break;
    case 'ArrowLeft':
      if (dx === 0) { dx = -10; dy = 0; }
      break;
    case 'ArrowRight':
      if (dx === 0) { dx = 10; dy = 0; }
      break;
  }
});

登录后复制

添加判断防止180度掉头（比如向上时不能立即向下）。

5. 实现游戏循环与碰撞检测

使用setInterval驱动游戏循环，处理移动、碰撞和吃食物：

function move() {
  const head = {x: snake[0].x + dx, y: snake[0].y + dy};
<p>// 检测是否撞墙
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
alert('游戏结束！');
location.reload();
}</p><p>// 检测是否撞到自己
for (let i = 0; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
alert('游戏结束！');
location.reload();
}
}</p><p>// 添加新头
snake.unshift(head);</p><p>// 判断是否吃到食物
if (head.x === food.x && head.y === food.y) {
// 重新生成食物
food.x = Math.floor(Math.random() <em> 40) </em> 10;
food.y = Math.floor(Math.random() <em> 40) </em> 10;
// 加快速度（可选）
speed = Math.max(50, speed - 5);
clearInterval(gameLoop);
gameLoop = setInterval(game, speed);
} else {
// 没吃到就删尾部
snake.pop();
}</p><p>draw();
}</p><p>// 启动游戏循环
let gameLoop = setInterval(move, speed);</p>

登录后复制

这样就实现了基本的游戏机制：移动、吃食物、变长、加速、死亡判断。