第三单元 贪吃蛇
第9课 JS 事件：按键转向
前端重点：JavaScript 事件——从「点了会怎样」到「按了会怎样」。
第三款游戏：贪吃蛇。手指离开鼠标，改用方向键当方向盘。
同一套五步，换一种操作——你会发现「点了会怎样」变成「按了会怎样」。
先让一个方块听懂上下左右，再谈整条蛇。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能说出：按键也是 JS 事件，和点击同类。
- 能举例按键后状态（方向/坐标）怎样变。
- 能做出「点一下或按一下，蛇动一格」的最小页。
三、弄懂这件事
第二单元已会：HTML 有零件，CSS 管好看，JS 管行为。本课把 JS 行为说细：
1．事件（Event）
点击、按键都叫事件：人做了一个动作，浏览器通知 JS，JS 再改页面。
打地鼠主要是「点」；贪吃蛇主要是「按」——都是事件，写法不同、道理一样。
本课重点：用方向键（或模拟按钮）改变蛇的方向或位置。
2．改的是状态，不是「魔法动画」
蛇看起来在爬，其实 JS 在改状态：身体是一串格子坐标（或位置数字）。
动一下 = 更新坐标 → 再按新坐标画到 HTML 上。
想通状态，下一课定时器自动前进才好接。
3．最小实验
别一上来就整条蛇 + 四向键盘 + 吃食物。
先做最小实验：点按钮或按键，蛇头向右走一格，坐标数字也变。
通了再换方向键；刷新页面假装「会动」不算数。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
点一下动一格
写：按右键时期望看见什么。
做对了会怎样按右键（或触发右移）后，蛇头明显向右移动一格。
做不出来怎么办用格子坐标或标记表示右移一格，先别追求长蛇。
做最小页：按钮让方块右移。
做对了会怎样页面上的蛇（或色块）真的在动，不是静止截图。
做不出来怎么办先用一个色块代表蛇头，能移动再加身体。
请 AI 解释你那几行在干什么（白话）。
做对了会怎样你能用自己的话复述：谁在改位置、怎样算动了一步。
做不出来怎么办卡住时先问自己：这段代码是谁在改位置？
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l09.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 show/l09.html。
做单个 HTML（可内嵌 JS）。目标是「最小移动」，不是完整贪吃蛇。 一打开就要看见：一个方块蛇头、「向右」按钮、坐标数字 x=0。 每点「向右」，方块右移一格且 x 增加。 不要完整蛇身、不要吃食物、不要服务器。 输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
把 JS 和 HTML 搅在一起无法只改一处。
不测按键就宣称完成。
七、带走这几句
- 记住：JS 管点了或按了会怎样，让画面真的变化。
- 先做出最小移动，再加长蛇和吃食物，别一步登天。
八、打勾再往下
- 我有一个能动的最小页。
- 我能白话解释移动。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
JS 更管？
蛇移动本质是？
最小实验优先？