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

简介：本资源是一份面向前端初学者的HTML贪吃蛇游戏实战项目，聚焦网页基础交互开发，帮助学习者掌握HTML结构搭建、CSS样式控制与JavaScript核心逻辑的协同实现。压缩包共3个文件（1个HTML主程序、1张背景图、1张角色图），总大小仅86KB，轻量易上手，适合嵌入式学习或课堂演示场景。HTML文件承载完整游戏入口与DOM结构，图片资源用于界面美化，整体结构简洁清晰，便于理解页面渲染与事件驱动机制。已有1454人学习下载，反映出其在入门级Web游戏开发中的高实用性与教学认可度。学习者可直接运行index.html体验完整游戏流程，同时深入研读代码，掌握键盘事件监听、setInterval定时刷新、蛇身坐标管理、碰撞检测逻辑及分数实时更新等关键技能，是巩固HTML+CSS+JS三件套综合应用能力的优质练手案例。

1. 这不是写网页，是用“画布+逻辑”亲手捏出一条会动的蛇：零基础也能跑通的 HTML 贪吃蛇

你是不是也试过点开一个网页小游戏，看着那条小蛇左拐右拐、越吃越长，心里嘀咕：“这玩意儿真就靠 HTML 写出来的？不是得装软件、下引擎、配环境吗？”——别怀疑，它真就是用你浏览器里天天打开的 HTML、CSS 和 JavaScript 三件套搭出来的。HTML 不只是排文字、插图片的“说明书”，它还能当舞台；CSS 不只是调颜色、改字体的“化妆师”，它能定位置、做动画；JavaScript 更不是玄学代码，它就是那个在后台掐着秒表、算着坐标、喊“蛇头撞墙了！”的裁判兼导演。这份「用 HTML 做贪吃蛇」资源，就是一套从空白文件开始、不装任何额外工具、不连服务器、双击就能在浏览器里跑起来的完整实践包。它适合所有刚听说“前端”但还没分清 HTML 和 Word 的人，也适合想亲手验证“代码真能控制画面”的好奇者。你不需要懂算法，不用背语法，只要愿意把几行代码复制粘贴进记事本，再拖进浏览器——5 分钟后，你就拥有一条听你键盘指挥的蛇。

2. 先搞懂三个角色：HTML 是舞台，CSS 是布景，JavaScript 是导演

2.1 HTML：不是“写文章”，是“搭舞台框架”

很多人第一次学 HTML，以为是在写作文——其实你在搭一个空剧场。<html>是整个剧场的屋顶，<body>是舞台地面，而<canvas id="game">这一行，就是你在舞台上钉下一块 400×400 像素的黑板。它不显示内容，只提供一个“可画区域”。你后面所有动作——蛇爬、食物闪、分数跳——都发生在这块黑板上。它不像<img>或<p>那样自带内容，它像一张白纸，等着 JavaScript 拿笔去画。所以别急着往里塞文字或图片，先确认这行代码存在、ID 名字拼对（后面 JS 会靠这个 ID 找到它），这就完成了“搭台”。

<!DOCTYPE html> <html> <head> <title>我的第一条贪吃蛇</title> <meta charset="utf-8"> </head> <body> <!-- 这就是舞台：一块叫 game 的画布 --> <canvas id="game" width="400" height="400"></canvas> </body> </html>

这段代码保存为snake.html，双击用 Chrome 或 Edge 打开，你会看到一片空白——别慌，这是正常现象。它没报错，说明舞台已搭好；它没内容，正等着你请导演（JS）上场。注意：width和height是画布“实际大小”，不是 CSS 放大缩小，改这里才真正影响游戏区域分辨率。

2.2 CSS：不是“美颜滤镜”，是“定舞台规矩”

CSS 在这里干两件事：一是让画布居中、加边框，让你一眼看清边界；二是关掉浏览器默认给<body>加的 8 像素外边距（margin），否则舞台会偏移、蛇头可能卡在看不见的缝隙里。新手常误以为 CSS 是“锦上添花”，其实它是“保命规则”——没有它，你写的蛇可能一半在屏幕外，或者撞墙检测永远失灵。

body { margin: 0; /* 关键！去掉浏览器默认外边距 */ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f0f0; } #game { border: 2px solid #333; background: white; }

把上面 CSS 放进<head>里的<style>标签内，或另存为style.css并用<link rel="stylesheet" href="style.css">引入。效果是：页面变灰底，画布稳稳居中，带一道清晰黑边。重点看margin: 0——这是血泪经验：某次我调试半天发现蛇总在右下角消失，最后发现是 body 默认 margin 把画布挤歪了，蛇头坐标算出来却撞在“看不见的墙”上。

2.3 JavaScript：不是“写程序”，是“当实时裁判”

JS 是整场戏的灵魂。它不做复杂计算，只干三件事：
①记状态：蛇头在哪（x, y）、朝哪走（dx, dy）、身体多长（数组存每节坐标）；
②盯时间：每 120 毫秒（约 8 帧/秒）检查一次：蛇该往哪挪？吃到食物没？撞自己或墙没？
③画画面：清空画布 → 画蛇身 → 画食物 → 显示分数。
它不预演、不预测，纯靠“下一帧”实时判断。所以你按方向键，不是立刻改变蛇头，而是告诉 JS：“下次检查时，请把 dx/dy 设成 -1/0/1”，它会在下一个 120ms 后执行。这种“帧驱动”逻辑，是所有游戏的基础，也是新手最容易卡壳的点——别想“按下就动”，要想“下一帧才动”。

3. 第一个能跑的例子：从零开始，手敲 60 行代码，让蛇动起来

3.1 准备工作：建三个文件，理清分工

你只需要新建三个纯文本文件（用记事本、VS Code 或任意编辑器）：

• snake.html：放 HTML 结构 + 内联 CSS + 引入 JS
• style.css（可选）：放样式，若嫌麻烦可全写进 HTML 的<style>里
• script.js：放全部游戏逻辑

提示：文件必须放在同一文件夹下，且名字一字不差。大小写敏感，Script.js或snake.HTML都会导致 JS 找不到画布。

3.2 复制粘贴：60 行极简版，专注“动起来”

下面代码是删减到只剩核心逻辑的版本（无分数、无重启、无音效），目标只有一个：让蛇在画布里自动爬行，按方向键能转向。把它完整复制进script.js：

// script.js const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); // 游戏参数：格子大小 20px，蛇初始位置在画布中央 const gridSize = 20; let snake = [{x: 10, y: 10}]; // 蛇身：一个对象数组，每个对象是 {x, y} 坐标 let food = {x: 15, y: 15}; // 食物位置 let dx = 0, dy = 0; // 蛇移动方向：dx=1向右，dy=-1向上 // 键盘监听：只响应方向键，避免按其他键干扰 document.addEventListener('keydown', (e) => { if (e.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -1; } if (e.key === 'ArrowDown' && dy === 0) { dx = 0; dy = 1; } if (e.key === 'ArrowLeft' && dx === 0) { dx = -1; dy = 0; } if (e.key === 'ArrowRight' && dx === 0) { dx = 1; dy = 0; } }); // 主循环：每 120ms 执行一次 function gameLoop() { // 1. 更新蛇头位置（新头 = 旧头 + 方向） const head = {x: snake[0].x + dx, y: snake[0].y + dy}; // 2. 插入新头到蛇身最前面 snake.unshift(head); // 3. 简单逻辑：没吃食物就剪掉尾巴（保持长度），吃了就留着（变长） // （这里先不处理吃食物，只保证蛇能动） snake.pop(); } // 绘制函数：清屏 → 画蛇 → 画食物 function draw() { // 清空画布（重置为白色） ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 画蛇身：每节是 20×20 的绿色方块 ctx.fillStyle = 'green'; snake.forEach(segment => { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize); }); // 画食物：红色方块 ctx.fillStyle = 'red'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize); } // 游戏主函数：循环调用更新和绘制 function main() { gameLoop(); draw(); } // 每 120ms 执行一次 main，形成动画 setInterval(main, 120);

3.3 让它跑起来：三步验证法

1. 检查 HTML 是否引入 JS：打开snake.html，确认<body>底部有<script src="script.js"></script>（必须在</body>之前）；
2. 保存并刷新：保存所有文件，双击snake.html，等待 2 秒；
3. 观察现象：
   • ✅ 正确：绿色方块（蛇）从画布中央开始，自动向右缓慢爬行；按上下左右键，蛇立即转向（注意：不能 180° 急转弯，比如向右时按左键无效，这是防自杀设计）；
   • ❌ 错误：一片空白 → 检查script.js文件名是否拼错、是否和 HTML 同目录；
   • ❌ 错误：蛇不动 → 检查浏览器控制台（F12 → Console）是否有Uncaught TypeError: Cannot read property 'getContext' of null，说明getElementById('game')没找到画布，大概率是 HTML 里<canvas>的id写成了gamee或大小写不对。

注意：这段代码故意没加“撞墙死亡”逻辑，所以蛇会穿墙而出，从另一边进来——这是刻意为之的简化。先确保“动”和“转向”成立，再加规则。

4. 新手必踩的 5 个坑：我翻车三次才总结出的排查清单

4.1 现象：页面空白，控制台报错 “Cannot read property 'getContext' of null”

原因：JavaScript 执行时，还没找到<canvas id="game">这个元素。常见于：JS 代码写在<head>里（此时 HTML 还没加载完），或id名字拼错（如写成game-canvas但 JS 里写getElementById('game')）。
解决：把<script src="script.js"></script>放到<body>最底部（</body>之前）；用浏览器开发者工具（F12）右键检查画布元素，确认其id属性值完全一致。

4.2 现象：蛇不动，控制台无报错

原因：setInterval(main, 120)没触发，大概率是main函数名写错，或main里漏写了gameLoop()或draw()调用。也可能是浏览器禁用了脚本（极少见，但可检查地址栏左侧图标）。
解决：在main函数第一行加console.log('tick');，刷新页面看控制台是否每 120ms 打印一次。不打印 → 检查setInterval语法；打印了但蛇不动 → 检查gameLoop里snake.unshift(head)是否执行（在unshift前加console.log(snake)看数组是否增长）。

4.3 现象：蛇乱跳、坐标突变、一按键就消失

原因：dx/dy被重复赋值。例如在keydown事件里写了dx = 1; dx = -1;连续两行，或没加&& dy === 0判断导致反向键生效。
解决：把keydown事件里的所有dx/dy赋值，替换成console.log('up:', dx, dy)，按方向键看控制台输出是否符合预期（如按↑应输出up: 0 -1）。确保每个if分支互斥，且只改一个方向变量。

4.4 现象：蛇看起来“抖动”或移动不流畅

原因：setInterval时间设太短（如10），浏览器来不及渲染；或太长（如500），动画卡顿。120ms（≈8fps）是平衡点，既不卡又不快。另一个原因是画布width/height和 CSS 设置冲突（如 HTML 里设width="400"，CSS 又用#game{width: 800px}拉伸），导致坐标计算错乱。
解决：固定用setInterval(main, 120)；检查画布属性：右键画布 → “检查元素”，看 computed 样式中width和height是否与 HTML 中width/height属性值一致。不一致就删掉 CSS 里的width/height，只靠 HTML 属性控制。

4.5 现象：按方向键没反应，但控制台有tick日志

原因：键盘事件监听对象错了。document.addEventListener('keydown', ...)是对的；如果写成canvas.addEventListener('keydown', ...)就无效，因为键盘事件默认不冒泡到 canvas，需监听全局document。
解决：确认事件监听写在document上；测试方法：在keydown回调里加console.log(e.key)，按任意键看是否输出键名（如ArrowUp）。不输出 → 监听对象错误；输出了但蛇不动 → 问题在if判断逻辑。

5. 下一步学什么：从“会动”到“能玩”，一条平滑升级路径

5.1 加一条“吃食物”逻辑：3 行代码，游戏立活

现在蛇只会爬，加“吃”就让它有目标。核心就三步：
① 判断蛇头坐标是否等于食物坐标；
② 相等则生成新食物（随机位置，避开蛇身）；
③ 不剪尾巴（snake.pop()不执行），蛇就变长了。

在gameLoop()函数里，snake.unshift(head)后面插入：

// 检查是否吃到食物 if (head.x === food.x && head.y === food.y) { // 生成新食物：随机位置，但确保不在蛇身上 food = { x: Math.floor(Math.random() * canvas.width / gridSize), y: Math.floor(Math.random() * canvas.height / gridSize) }; // 不执行 snake.pop()，蛇身自动变长 } else { snake.pop(); // 没吃到才剪尾巴 }

注意：Math.random()生成 0~1 小数，乘以格子数再Math.floor得整数坐标。canvas.width / gridSize是画布能容纳的格子总数（400/20=20），所以x和y范围是 0~19，完美适配。

5.2 加“撞墙死亡”：5 行判断，建立真实边界感

当前蛇穿墙，加四条边界判断即可。在gameLoop()开头，const head = ...后面插入：

// 检查是否撞墙：x 或 y 超出 [0, 画布格子数) 范围 if (head.x < 0 || head.x >= canvas.width / gridSize || head.y < 0 || head.y >= canvas.height / gridSize) { alert('Game Over! 你撞墙了！'); snake = [{x: 10, y: 10}]; // 重置蛇 dx = 0; dy = 0; // 停止移动 food = {x: 15, y: 15}; // 重置食物 }

这段代码让蛇一旦越界就弹窗、重置。它用的是“硬重置”，后续可升级为“暂停+按钮重启”，但此刻目标明确：先让规则生效，感受“失败”的反馈。

5.3 加“撞自己死亡”：遍历身体，1 行核心判断

蛇头碰到自己身体任何一节，就 Game Over。只需在撞墙判断之后，加一个循环：

// 检查是否撞自己：跳过蛇头（i=0），从第二节开始比 for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { alert('Game Over! 你咬到自己了！'); snake = [{x: 10, y: 10}]; dx = 0; dy = 0; food = {x: 15, y: 15}; break; // 找到就退出，避免重复弹窗 } }

血泪经验：初学者常写for (let i = 0; i < snake.length; i++)，结果蛇头永远等于自己，一运行就弹窗。记住：i=0是蛇头，必须从i=1开始比。

5.4 学习路径建议：按“功能模块”拆解，拒绝死磕文档

你不需要一口气啃完 JavaScript 所有语法。按这个顺序推进，每步 30 分钟，当天就能看到成果：

从那以后我每次教新人，都强制他们先删掉所有“炫技代码”（比如渐变色、阴影、计时器），只留snake,food,dx/dy,setInterval这四个变量和一个循环。跑通再加，加一条测一条。因为贪吃蛇的本质不是“多酷”，而是“坐标、方向、时间”这三个概念的诚实对话——蛇不会骗你，它动不了，一定是坐标算错了；它不转向，一定是dx/dy没更新。这种即时反馈，是编程世界里最珍贵的“后悔药”。希望帮到你。

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