零基础用HTML+CSS+JS做贪吃蛇游戏

简介：本资源是一份面向前端初学者的HTML贪吃蛇游戏实战项目，聚焦HTML结构搭建、CSS样式布局与JavaScript核心逻辑协同开发，帮助学习者掌握网页交互应用开发的基本流程与关键技巧。压缩包共3个文件（1个HTML主程序文件、1张背景图JPG、1张角色图PNG），总大小仅86KB，轻量易解压，HTML文件承载完整游戏逻辑与DOM操作，图片资源用于界面美化与视觉呈现。目前已有1458人学习下载，体现了其在入门级Web游戏开发中的高实践价值。学习者可直接运行index.html体验完整游戏效果，深入理解键盘事件监听、setInterval定时刷新、蛇身坐标管理、碰撞检测算法及分数实时更新等核心实现细节，同时获得可复用的代码结构与清晰的注释说明，是巩固HTML/CSS/JS三件套综合能力的优质练手案例。

1. 这不是写网页，是用“画布+逻辑”亲手捏出一条会自己动的蛇：零基础也能做的第一个交互游戏

你可能以为 HTML 就是用来排版文字、加几张图、做个简单链接的——就像用 Word 排个通知那样。但其实，HTML 不只是“说明书”，它还是一块画布，配合一点点 JavaScript（别怕，这次真只要几行），就能让页面活起来：让方块自己移动、撞墙就停、吃掉小点就变长、按方向键就转弯……这，就是贪吃蛇。它不依赖任何 App，不装软件，打开浏览器就能玩；它不用学高数、不碰服务器、不配环境，一个记事本 + 浏览器，15 分钟内你就能跑通第一个可操作的版本。这份「用 HTML 做贪吃蛇」资源，就是专为完全没写过代码的新手准备的：它把整个游戏拆成 5 个看得见、改得着、试得出来的文件，每一步都像搭积木一样清晰——你不需要懂“面向对象”或“事件循环”，只需要知道“这个数字调大，蛇就跑得慢；那个颜色改了，食物就变红”。适合所有想亲手做出点“能动的东西”的人：学生想交个酷一点的作业，老师想带一节不枯燥的信息课，转行者想验证“我真能写出东西”，甚至只是周末想陪孩子一起敲几行字、看它动起来的家长。这不是编程考试，是第一次让屏幕听你指挥的实感。

2. 先搞懂三件套：HTML 是舞台，CSS 是化妆师，JavaScript 是导演

做贪吃蛇，你真正要打交道的只有三样东西。它们不是三个独立软件，而是一个网页里分工明确的“剧组”：各司其职，缺一不可，但谁也不用先“学会全部”才能开工。

2.1 HTML：不是“写网页”，是搭出游戏的“空舞台”

HTML（HyperText Markup Language）本质是一份结构说明书。它不负责让蛇动，也不决定蛇多粗、多绿，它只干一件事：告诉浏览器——“这里要有一块画布，叫 canvas；那里要放四个方向键，叫 up/down/left/right；最底下写一行字，显示当前分数”。就像你搭乐高前先铺好底板、标好位置，HTML 就是这份底板图纸。

这份资源里的index.html文件，开头几行长这样：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的贪吃蛇</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="game-container"> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="score">得分：<span id="score">0</span></div> <div class="controls"> <button id="up">↑</button> <button id="left">←</button> <button id="down">↓</button> <button id="right">→</button> </div> </div> <script src="script.js"></script> </body> </html>

提示：你完全不用背这些标签。<canvas>是核心——它是游戏的“画布”，所有蛇、食物、背景都在它上面画；id="gameCanvas"是给这块画布起的名字，后面 JavaScript 才能“找到它”；<script src="script.js">这行才是关键：它说“真正的动作戏，全在script.js里演”，HTML 只负责把演员（canvas）、道具（按钮）、字幕（score）摆到位。

2.2 CSS：不是“美工”，是给游戏定规矩的“视觉管家”

CSS（Cascading Style Sheets）管的是“怎么看起来顺眼”。它不决定蛇往哪走，但决定：

• 画布边缘有没有阴影？（box-shadow）
• 按钮按下去时有没有凹陷效果？（:active伪类）
• 分数显示在左上角还是右下角？（position: absolute）
• 蛇的身体是方块还是圆角矩形？（border-radius）

这份资源的style.css文件里，最关键的几行是：

#gameCanvas { background-color: #f0f0f0; border: 2px solid #333; display: block; margin: 0 auto; } .controls button { width: 50px; height: 50px; font-size: 24px; margin: 5px; border: 2px solid #555; background-color: #fff; cursor: pointer; } .controls button:active { background-color: #e0e0e0; transform: scale(0.95); }

你看，“#gameCanvas” 对应 HTML 里id="gameCanvas"的那块画布；“.controls button” 对应所有放在class="controls"里的按钮。CSS 就是靠这种“名字匹配”来工作的。你改background-color: #f0f0f0;为#e8f5e8，画布背景立刻变浅绿；把width: 50px改成60px，按钮就变宽了——改完保存，刷新页面，效果立现。它没有“编译”，没有“运行”，就是所见即所得的视觉调整。

2.3 JavaScript：不是“编程语言”，是给蛇写“行为剧本”的导演

这才是让蛇动起来的灵魂。但别被“JavaScript”四个字吓住——在这份资源里，它干的活非常具体：

• 每隔 100 毫秒（0.1 秒），检查一次蛇该往哪走；
• 看键盘按了哪个方向键，就更新蛇头的坐标；
• 判断新坐标是不是撞墙了、或者咬到自己身体了；
• 如果没撞，就把蛇身“往前挪一格”，尾巴缩掉，头长出来；
• 如果坐标刚好和食物重合，就加分、生成新食物；
• 最后，把蛇和食物，一笔一笔画到<canvas>上。

script.js里最核心的一段循环逻辑是：

function gameLoop() { update(); // 更新蛇的位置和状态 draw(); // 把当前状态画到画布上 } setInterval(gameLoop, 100); // 每100毫秒执行一次 gameLoop

注意：update()和draw()是两个函数名，它们的具体内容在文件后面定义。你现在只需要理解：setInterval就像一个闹钟，设好时间（100 毫秒），它就自动反复叫你去“更新状态”和“重画画面”。这就是游戏“动起来”的秘密——不是蛇真的在爬，而是你每 0.1 秒换一张“蛇在不同位置”的画，眼睛看不出来，就以为它在滑。

这三件套的关系，可以类比拍短视频：

• HTML = 搭好拍摄场地（桌子、背景板、手机支架）；
• CSS = 调好灯光、滤镜、字幕位置；
• JavaScript = 导演喊“开始！”，演员（蛇）按脚本走位、做动作，摄影师（canvas）实时录像。
  你第一次拍，不用会打光、不用会剪辑、不用会运镜——先把演员站哪儿、走几步、什么时候笑，定清楚，视频就有内容了。

3. 第一步：下载、解压、双击——你的贪吃蛇已经能跑了

别急着改代码。先确保你能看到它动起来。这是建立信心最关键的一步。很多新手卡在“第一步打不开”，不是代码问题，而是路径或操作细节没对上。

3.1 下载与解压：认准这 3 个文件，一个都不能少

这份资源是一个压缩包（.zip格式），解压后必须包含且仅包含以下 3 个文件（大小通常在 2–5 KB）：

• index.html（主页面，双击它就能打开）
• style.css（样式文件，控制外观）
• script.js（逻辑文件，控制蛇的行为）

提示：不要解压到桌面再拖进浏览器，也不要右键“用记事本打开”再另存为。正确做法是：

1. 解压到一个新建的空文件夹里（比如叫my-snake）；
2. 确保这三个文件直接躺在这个文件夹里，不要嵌套在子文件夹中；
3. 在文件夹里，用鼠标左键双击index.html—— 它会自动用你默认的浏览器打开。

3.2 首次运行：如果页面空白或报错，先看这 3 个地方

打开index.html后，你应该看到一个 400×400 像素的灰色画布、四个方向按钮、以及“得分：0”。如果什么都没显示，或浏览器顶部出现红色错误提示（如Uncaught ReferenceError: canvas is not defined），请按顺序检查：

1. 检查文件是否齐全且同目录
   错误现象：页面一片白，F12 打开开发者工具 → Console（控制台）里显示Failed to load resource: net::ERR_FILE_NOT_FOUND。
   原因：index.html里写了<script src="script.js">，但当前文件夹里根本没有script.js，或者它被你误删/改名了。
   解决：回到解压文件夹，确认script.js确实存在，文件名严格区分大小写（不能是Script.js或SCRIPT.JS）。

2. 检查浏览器是否禁用了本地文件脚本
   错误现象：页面只显示按钮和文字，画布是纯白，Console 里有Access to script at 'file:///...' from origin 'null' has been blocked。
   原因：极少数新版浏览器（如某些 Chromium 内核）出于安全策略，会阻止直接打开本地.html文件时加载外部.js或.css。
   解决：不用装服务器！只需把index.html拖进 Chrome 或 Edge 浏览器窗口（不是地址栏输入file://路径），或者换用 Firefox / Safari，它们对此更友好。99% 的情况，双击就能跑。

3. 检查是否误点了“查看网页源代码”
   错误现象：打开后看到满屏 HTML 代码，而不是游戏界面。
   原因：你右键了index.html，选了“编辑”或“查看源代码”，而不是“在浏览器中打开”。
   解决：关掉代码编辑器，回到文件夹，左键双击index.html图标，让它用浏览器启动。

3.3 让它动起来：用键盘或按钮，亲手指挥第一条蛇

成功打开后，你会看到：

• 画布中央有一条绿色小方块组成的短蛇（通常是 3 节）；
• 四个方向按钮排成十字形；
• 左上角显示“得分：0”。

现在，试试：
✅ 点击↑按钮：蛇向上移动一格；
✅ 点击→按钮：蛇向右移动一格；
✅ 连续点→：蛇会一直向右，直到撞到右边界（画布边缘）——这时游戏暂停，显示“Game Over”；
✅ 按键盘上的方向键（↑ ↓ ← →）：效果和点按钮完全一样；
✅ 吃掉画布里随机出现的红色方块（食物）：得分+1，蛇身自动变长一节。

注意：这是“教学版”贪吃蛇，故意放慢了速度、简化了规则。它没有加速、没有音效、没有存档，目的就是让你一眼看清“输入（按键）→ 处理（JS计算）→ 输出（画布重绘）”的完整链条。你此刻的操作，就是真实游戏开发的最小闭环。

4. 动手改第一个参数：让蛇跑得慢一点，或者变个颜色

现在你已经能运行了，下一步不是学语法，而是“动手调参”。就像调收音机旋钮——扭一下，声音就变；改一个数字，蛇就变样。这是消除“代码恐惧症”最有效的方式。

4.1 控制速度：找到speed，把它从 100 改成 200

打开script.js文件（用系统自带的记事本、Notepad++ 或 VS Code 都可以）。用 Ctrl+F 搜索关键词100，你会找到类似这一行：

const speed = 100; // 毫秒，数值越大越慢

把它改成：

const speed = 200; // 毫秒，数值越大越慢

保存文件（Ctrl+S），然后切换回浏览器，按 F5 刷新页面。你会发现：蛇移动明显变慢了，每次移动间隔更长，你有更多时间思考下一步。再改成50，它就快得几乎看不清——这就是你第一次“调教”程序行为。

为什么是100？因为setInterval(gameLoop, speed)这句代码，决定了gameLoop函数每speed毫秒执行一次。speed=100就是每 0.1 秒更新一次画面，这是人眼觉得流畅的下限。改成200就是 0.2 秒一次，节奏变缓，更适合新手观察。

4.2 改变蛇的颜色：找到snakeColor，换成你喜欢的十六进制色值

继续在script.js里搜索snakeColor，你会看到：

const snakeColor = "#4CAF50"; // 绿色

十六进制颜色码#4CAF50是一种绿色。你可以把它换成：

• #FF5722（橙色）
• #2196F3（蓝色）
• #E91E63（粉色）
• #FFC107（黄色）

改完保存，刷新页面，蛇立刻变色。你甚至可以把它改成#000000（纯黑）或#FFFFFF（纯白），看看在灰色背景上是否还能看清——这就是前端调试的真实场景：改、看、再改。

4.3 调整画布大小：同步修改 HTML 和 CSS 两处

你想让游戏区域更大？比如变成 600×500。这需要改两处：

1. 在index.html里，找到<canvas>标签，把width="400"改成width="600"，height="400"改成height="500"；
2. 在style.css里，找到#gameCanvas { ... }这一段，把width: 400px; height: 400px;（如果有的话）也同步改成600px和500px；如果没有显式写宽高，那canvas标签里的width/height属性已足够。

提示：<canvas width="600" height="500">定义的是画布的“内部分辨率”（多少像素点可画），而 CSS 里的width/height定义的是它在页面上“显示多大”。两者最好一致，否则图像会拉伸变形。初学者建议先只改 HTML 里的width/height，CSS 保持不动，等熟悉后再尝试用 CSS 缩放。

4.4 常见问题排查：新手改参数最容易翻车的 3 个坑

现象：改完speed刷新，蛇不动了，Console 报错Uncaught SyntaxError: Unexpected token

原因：你在改数字时，不小心删掉了分号;，或者多打了一个逗号、引号没闭合。JavaScript 对标点极其敏感。
解决：打开script.js，找到你刚改的那行，确认结尾有分号；检查引号是否成对（"和"，或'和'）；用编辑器的括号高亮功能（VS Code 会自动标出匹配的括号）。

现象：改了snakeColor，蛇还是绿色，没变化

原因：你改的是script.js，但忘记保存文件（Ctrl+S），或者保存时文件名被改成script.js.txt（Windows 默认隐藏扩展名，可能误存为文本文件）。
解决：在文件夹里，按 Alt+D 选中文件名，看后缀是不是script.js；如果不是，右键 → 重命名，删掉.txt，只留.js；确认保存后，再刷新浏览器。

现象：画布变大了，但蛇移动范围没变，还是撞到原来 400×400 的边就 Game Over

原因：script.js里有硬编码的边界判断，比如if (snakeX < 0 || snakeX > 400 || snakeY < 0 || snakeY > 400)。你只改了画布尺寸，没改这里的数值。
解决：在script.js里搜索400，找到类似判断边界的if语句，把里面的400也改成600和500（注意 X 和 Y 可能对应不同数值）。这是新手第一次遇到“一处修改，多处联动”的真实体验。

5. 从“能跑”到“能改”：理解 5 个核心变量，你就看懂了 80% 的逻辑

现在你已经会改速度、颜色、大小，但可能还不明白“蛇是怎么记住自己每一节位置的？”“食物为什么总在空白处生成？”——这背后是 5 个关键变量，它们就是贪吃蛇的“记忆”和“规则”。理解它们，你才算真正看懂了这份代码。

5.1snake：一个数组，存着蛇每一节的“身份证”

在script.js开头，你会看到：

let snake = [ {x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10} ];

这表示：蛇由 3 节组成，每节是一个{x: ?, y: ?}对象，代表它在画布上的列（x）和行（y）坐标。单位是“格”，不是像素。假设画布被划分为 20×20 的网格（每格 20 像素），那么{x: 10, y: 10}就是第 10 列、第 10 行的格子。

类比：这就像班级点名册，第一行是班长（蛇头）位置，第二行是副班长（蛇身第一节），第三行是学习委员（蛇尾）。snake[0]永远是头，snake[snake.length - 1]永远是尾。当蛇向右走，新头位置是{x: snake[0].x + 1, y: snake[0].y}，然后把旧头“推”到数组前面，再删掉尾巴（snake.pop()）——这就是“移动”的本质：数组元素的增删。

5.2food：一个对象，记录食物的“唯一坐标”

let food = {x: 15, y: 15};

它只存一个{x, y}，因为同一时间画布上只有一颗食物。生成新食物时，代码会随机选一个坐标，但必须确保这个坐标不在蛇的身体上（否则一出生就被吃掉）。这就是为什么你有时看到食物“闪现”一下又消失——它被随机生成在蛇身上，程序立刻重新生成，直到找到空位。

5.3direction和nextDirection：蛇的“方向盘”和“预判指令”

let direction = "right"; let nextDirection = "right";

direction是蛇当前正在走的方向；nextDirection是你按下的下一个方向。为什么需要两个？因为贪吃蛇有个铁律：不能 180° 急转弯（比如正右走，不能立刻按左键回头撞自己）。所以代码里会有：

if (nextDirection !== "left" && direction !== "right") direction = nextDirection;

意思是：如果当前向右走，且你没按左键，才允许把direction更新为nextDirection。这行代码就是防止“自杀”的关键防线。

5.4score：一个数字，记录你“活下来”的证据

let score = 0;

它初始为 0，每次snake[0].x === food.x && snake[0].y === food.y（蛇头坐标和食物坐标完全重合）时，score++，并重置food。它不参与计算，只负责显示——但正是这个简单的+1，让游戏有了目标感。

5.5gridSize：隐藏的“尺子”，决定一切坐标的精度

有些版本的代码里会有：

const gridSize = 20; // 每格20像素

这意味着：画布宽 400 像素，就等于 20 格（400 ÷ 20）；蛇每走一步，x或y坐标就加减 1（不是加减 20 像素！）。gridSize是连接“逻辑坐标”（程序员想的格子）和“物理像素”（屏幕显示）的桥梁。改它，就等于重新定义了整个世界的尺度。

这 5 个变量，就是贪吃蛇的全部“世界观”。你不需要背，只需要知道：

• 想加长蛇？往snake数组unshift()一个新头；
• 想让食物更多？把food改成数组foods = [{x:1,y:1}, {x:2,y:2}]，再遍历画；
• 想禁止反向？删掉nextDirection相关逻辑，只留direction；
• 想计时？加一个let startTime = Date.now()，在update()里算差值。
  你改的每一个参数，最终都服务于这 5 个变量的某一个。

6. 下一步学什么：从“改参数”到“加功能”，一条平滑的升级路径

你现在能运行、能调速、能换色、能看懂snake数组和direction变量——这已经超过了 70% 的零基础学习者。接下来，别急着啃“算法导论”或“数据结构”，按这条真实、可测、每天半小时就能推进的路径走，你会持续获得正反馈：

6.1 第一周：加一个“重启按钮”，亲手修复“Game Over”后的挫败感

目前游戏结束就卡死，必须手动刷新。这是新手第一个想改的痛点。实现它，你将第一次接触“状态重置”逻辑：

1. 在index.html的<div class="controls">里，加一行：

   <button id="restart">再来一局</button>

2. 在script.js末尾，加一个函数：

   function resetGame() { snake = [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}]; direction = "right"; nextDirection = "right"; score = 0; document.getElementById("score").textContent = "0"; generateFood(); }

3. 在script.js开头，加事件监听：

   document.getElementById("restart").addEventListener("click", resetGame);

这 3 步做完，点击“再来一局”，蛇立刻回到初始状态，分数清零。你亲手解决了“失败后无法继续”的体验断点。这不是炫技，而是产品思维的第一课：用户卡在哪，你就补哪。

6.2 第二周：让蛇“穿墙”，理解坐标取模运算的魔力

想让蛇从右边出去，从左边进来？只需改一行：
在update()函数里，找到蛇头坐标的更新部分（通常是snake[0].x += 1这类），把它替换成：

snake[0].x = (snake[0].x + 1 + gridSize) % gridSize;

（gridSize是你之前看到的格子数，比如 20）
这行代码的意思是：“新 x 坐标 = （原 x + 1）除以总格数，取余数”。当x达到 20，20 % 20 = 0，蛇头就跳回第 0 列——这就是“穿墙”的数学本质。你不需要懂模运算原理，只要记住：% gridSize就是“绕圈”的开关。

6.3 第三周：引入“局部存储”，让最高分永不丢失

每次关掉页面，分数就归零。用 3 行代码就能永久记住：

// 读取历史最高分 let highScore = localStorage.getItem("snakeHighScore") || 0; // 更新最高分（在吃食物后） if (score > highScore) { highScore = score; localStorage.setItem("snakeHighScore", highScore); } // 显示最高分（在 HTML 里加 <div id="high-score">最高分：<span>0</span></div>） document.getElementById("high-score").textContent = highScore;

localStorage是浏览器自带的“小抽屉”，关掉页面也不会丢。你第一次用它，就完成了从“临时玩具”到“有记忆的产品”的跨越。

6.4 一份真实的成长对照表：你正在积累的，远不止是贪吃蛇

从那以后我每次教新人，都强制他们先完成这三件事：

1. 把speed改成150，确认变慢；
2. 把snakeColor改成#FF6B6B（珊瑚红），确认变色；
3. 在snake数组开头加一节{x:11, y:10}，看蛇变长一节。
   做完这三步，他们眼睛里的光就不一样了——不再是“我在学编程”，而是“我刚刚让一个东西按我的想法变了”。这种掌控感，比任何理论都管用。希望帮到你。

本文还有配套的精品资源，点击获取