第三单元 贪吃蛇
第10课 游戏循环：定时器前进
前端重点：JS 定时器做成游戏循环——不按键也会一格一格前进。
蛇要有生命感：不用你连点，它自己一格一格往前爬。
看着格子自己走，比静态方块刺激得多——这就是创意推进的一刻。
一次只推进一个现象：先会动，再谈吃食物。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能说出：游戏循环靠 JS 定时器反复「更新→重画」。
- 能判断：自动前进改的是 JS，不是 CSS 颜色。
- 能加上自动前进且不弄乱 HTML 结构。
三、弄懂这件事
事件是「人一动，JS 才动」。游戏还要自己动——靠定时器循环：
1．定时器与游戏循环
用 JS 的定时器（如每隔几百毫秒）：触发 → 更新位置状态 → 画到页面 → 再等下一次。
这就是游戏循环：不用你连点，蛇也会一格一格爬。
速度太快看不清就先把间隔调慢，验收「不按键也会动」。
2．仍守三层
HTML 零件别删；CSS 只负责好看；自动前进必须写在 JS。
一次只改一层：这一课只加/改循环，不要顺手重写整页。
出了问题才分得清：是结构坏了、外观坏了，还是行为坏了。
3．对 AI 下单
对 AI 说清：只加定时自动前进（或只改间隔毫秒），不要重写 HTML 结构。
改完自己看：手离开键盘，蛇仍在动，才算过关。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
自动前进一步
画出用哪一层解决「太快」。
做对了会怎样你指出：自动往前走、计时、出鼠这类事要靠 JS。
做不出来怎么办先圈出 JS（脚本）层，再改循环间隔的毫秒数。
加上自动前进。
做对了会怎样即使不按键，蛇（或角色）也会按节奏自己往前走。
做不出来怎么办循环间隔先设得很慢，看清每一步再加快。
只改速度再测。
做对了会怎样关键结构标签还在，没有被整页重写删掉。
做不出来怎么办对 AI 限令写：禁止整页重写，只改指定一处。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l10.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送，在已有成果上小步改，不要整页重写。本课文件是 show/l10.html。
在当前蛇头页上加游戏循环（不要重写整页结构）： - 蛇头每隔约 300ms 自动向右前进一格； - 加一个「减速」按钮，点了变慢； - 仍显示坐标。 不要服务器。 输出要求：即使只改外观，也必须用 ```html 文件名 输出完整 HTML 全文（保留原有 script 与结构），禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
为改速度让 AI 重做整个游戏。
用 CSS 动画代替真实位置更新却声称有逻辑。
七、带走这几句
- 用循环/定时器让游戏自己往前走，你定规则即可。
- 一次只改一层（结构/样式/逻辑），降低返工。
八、打勾再往下
- 有自动前进。
- 我能指出三层分工。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
蛇自动前进靠？
颜色不对先改？
对 AI 更好的说法？