第三单元 贪吃蛇
第12课 完成：多状态联动（吃·变长·计分）
五步收官：吃食物、变长、计分，能演示一局贪吃蛇。
贪吃蛇毕业：吃食物变长、分数上涨，玩到吃到三个也能讲清楚。
从按键到自动爬、再到吃与撞——你又走完一轮创意→游戏。
演示时先让同学玩，再讲你改过哪一处。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 有食物与得分。
- 吃到变长。
- 能完整演示。
三、弄懂这件事
这一课就这几小步：
1．吃食物
食物出现在随机格子上，蛇头碰到就算吃到。
吃到之后尾巴加长一格，分数 +1，食物换到新位置。
吃三个也能讲清楚，就够当本课的最小完整版。
2．验收
验收用清单勾：会动、会转弯、会吃、会撞停、能再来。
五格都勾上，才算贪吃蛇毕业，而不是「好像能动」。
哪一格失败，就只修那一处，再整局重玩。
3．展示
展示时先让同学玩，再讲你改过哪一层、哪一处。
从按键到自动爬、再到吃与撞，把故事讲短一点就够。
完整最小版，胜过半成品大作。
至此：事件、循环、失败状态都练过——仍全部跑在浏览器里，不用服务器。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
可玩贪吃蛇
写验收清单 5 条。
做对了会怎样规则里同时写到吃食物和碰撞失败。
做不出来怎么办清单写成：能移动、能转向、能吃、能撞失败、能再来。
做出可玩版。
做对了会怎样吃到食物后身体变长，能看见。
做不出来怎么办先做短蛇（两三段），别一上来追求很长。
封存 games/snake/index.html。
做对了会怎样交给同学打开就能演示，不必再改代码。
做不出来怎么办先用单个 HTML 文件完成最小版即可。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
games/snake/index.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送，在已有成果上小步改，不要整页重写。本课文件是 games/snake/index.html。
在当前可转向、可撞墙结束的蛇基础上，做成最小完整版： - 吃食物变长并加分； - 撞墙或撞自己结束，可再来一局； - 画布/格子一打开就看得见。 纯前端，适合投影。 输出要求：即使只改外观，也必须用 ```html 文件名 输出完整 HTML 全文（保留原有 script 与结构），禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
只有自动动没有食物。
结束无法重来。
七、带走这几句
- 能玩完的完整最小版，胜过半成品大作。
- 清单勾完再 Demo；勾不完就缩小演示范围。
八、打勾再往下
- 能吃到食物。
- 能演示结束与再来。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
吃到食物后应？
本单元核心技术？
演示底线？