第四单元 飞机大战
第14课 多对象状态与碰撞
推进创意：子弹、敌机、打中加分——每加一样就自己玩一遍。
天空热闹起来：子弹往上、敌机往下，撞上就加分。
多一个会动的家伙，游戏就更像「大战」而不只是挪飞机。
每加一样，自己先打 20 秒验收。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能列出三类对象。
- 能描述一种碰撞结果。
- 做出可发射的最小版。
三、弄懂这件事
这一课就这几小步：
1．多对象 = 多份 JS 状态
场上有玩家、子弹、敌机等对象；子弹和敌机往往不止一个。
在 JS 里常用数组/列表记住每一份的位置、是否还在等状态。
这仍是纯前端：数据都在浏览器内存里，不需要服务器。
2．循环里更新每一份
每个定时（游戏循环）要把列表扫一遍：移动 → 检测碰撞 → 加分或消失。
顺序写清，出了问题才知道卡在哪一步。
一次只加一种对象或一种碰撞，加完自己玩一遍。
3．碰撞结果
先做最小结果：打中敌机就消失，并加 1 分。
玩家受伤、生命值可以以后再加。
每加一样，自己打大约 20 秒验收。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
能发射的最小空战
列出三类对象及数据。
做对了会怎样有表示位置的字段（如 x、y）。
做不出来怎么办位置用 x、y 两个字段表示即可。
做出发射与敌机移动。
做对了会怎样预览里能看见角色或方块在移动。
做不出来怎么办先让一个敌机移动起来，再加发射和碰撞。
打中加分。
做对了会怎样点过之后分数数字真的变了。
做不出来怎么办碰撞先用简单矩形判定即可。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l14.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 show/l14.html。
做简化飞机大战单页（纯前端，可以简陋，但必须能玩）： 游戏区高度要贴近浏览器可视高度（推荐 #box 用 height: calc(100vh - 52px)，宽度可随窗口；禁止固定成很小的方块）。 一打开就要在深色区域里看见绿色玩家方块（不要空舞台）。 - ← → 左右移动；空格发射白色子弹； - 红色敌机从上往下掉；打中分数 +1； - 用 setInterval 驱动移动与碰撞。 不要服务器。做成后我要自己玩几秒。 输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
对象太多一上来就 Boss 关。
碰撞不测。
七、带走这几句
- 多个对象就有多份状态，每份都要更新、都要验收。
- 碰撞先做成一种（例如打中敌机），跑通再加别的。
八、打勾再往下
- 能发射。
- 打中有反馈。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
子弹适合存成？
打中后常见结果？
本课仍？