第三单元 贪吃蛇
第11课 失败状态：碰撞与再来
前端重点：用 JS 做出失败状态，并在页面上提示、提供再来。
好游戏要有紧张感：撞墙就停，还能再来一局。
结束不是扫兴，是规则——没有失败，通关也就没意义。
写清「怎样算输」，玩家才知道该怕什么。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 方向键能转向。
- 撞墙结束。
- 失败有提示并可重来。
三、弄懂这件事
这一课就这几小步：
1．输入仍是事件
方向键改方向：上、下、左、右各是一种键盘事件 → 改「当前方向」状态。
立刻反向撞头可以后做；这一课先保证四向能听懂。
输入稳了，碰撞判断才有意义。
2．碰撞 = 用 JS 判断状态
下一步如果出界，或碰到自己身体，就把游戏状态改成「结束」，并停掉循环。
结束不是随便黑屏，而是按规则改状态、停定时器、更新画面。
自己玩几局，确认「该停的时候真的停」。
3．失败 UI 也是前端功能
结束提示、再来按钮，都是 HTML 零件 + JS 切换显示；不是故障。
「怎样算输」写进规则，并在页面上说清楚。
没有失败状态，玩家就不知道边界在哪。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
转向与撞墙
写失败条件两条。
做对了会怎样失败条件写清：撞墙（出界）和撞到自己。
做不出来怎么办两条失败都写清：出界失败；咬到自己也失败。
接方向键。
做对了会怎样按方向键后能转向，方向变化看得见。
做不出来怎么办方向先只支持左右，跑通再加上下。
撞墙显示结束，并提供再来。
做对了会怎样结束后有提示，并且能再开一局。
做不出来怎么办结束可用弹窗或页内文字提示，并提供「再来」按钮。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l11.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送，在已有成果上小步改，不要整页重写。本课文件是 show/l11.html。
在当前自动前进页上补失败状态（不要整页重写）： - 方向键可转向； - 撞到边界（出界）结束，并显示结束提示； - 提供「再来一局」按钮。 可以暂时不吃食物。不要服务器。 输出要求：即使只改外观，也必须用 ```html 文件名 输出完整 HTML 全文（保留原有 script 与结构），禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
没有失败条件却说游戏完成。
键盘无效却不测。
七、带走这几句
- 先写清失败规则，再谈更好看的皮肤。
- 失败提示同样要验收：人话、位置、能不能懂。
八、打勾再往下
- 方向键可用。
- 撞墙能结束。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
碰撞检查发生在？
结束提示属于？
本课仍保持？