第一单元 点击闯关
第4课 完成：最小可交互页（点击闯关）
用五步收官：交一款同学能当场点的点击闯关。
第一关毕业戏：交一款同学能当场点的点击闯关。
按钮换关、分数会变——这就是「从创意到游戏」的第一站。
演示时先让别人玩 30 秒，再讲你和 AI 怎么分工。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 做出至少 3 个可点目标或关卡切换。
- 有分数或关卡号变化。
- 能 30 秒讲清规则并演示。
三、弄懂这件事
这一课就这几小步：
1．最小可玩
不要一上来做动画大片或联机排行榜。
先做出最小可玩：有标题、有按钮、有分数，点了页面会有变化。
能玩起来，才配谈下一刀怎么加。
2．成功标准
成功标准要用眼睛能查的话写出来。
例如：点一次分数 +1；到 10 显示过关；刷新后可以重来。
写不清「做成了长什么样」，演示时就会含糊。
3．演示说法
演示时先用一两句说清规则，再亲手玩大约 20 秒。
玩完再指出：哪一处请氛围编程工具里的 AI 改过。
先让别人看见能玩，再讲过程，比先讲概念更有说服力。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
可玩点击闯关
写成功标准三条（可观察）。
做对了会怎样正好写出三条可观察标准，并且含点击和过关。
做不出来怎么办①点按钮分数+1；②到 10 过关；③换关后仍能玩。
让 AI 出最小页，自己点验。
做对了会怎样你点按钮后，页面上的分数数字真的增加了。
做不出来怎么办若分数不变，就对 AI 只提一件事：请只修点击加分，别改别的。
封存到 games/click/index.html，准备展示。
做对了会怎样把文件交给同学，对方打开浏览器就能玩，不必再改代码。
做不出来怎么办先做成单个 HTML 也行，只要别人双击或预览就能玩。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
games/click/index.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 games/click/index.html。
做单页「点击闯关」小游戏（一个 HTML，纯前端）。 必须同时做到，做成后我要自己点验： 1）有大按钮可点，每点一次分数 +1，分数显示在页面上； 2）至少 3 关：分数到阈值可点「下一关」； 3）通关后有「再来」或重新开始。 可见要求：按钮和分数一打开就能看见，不要只有标题。不要服务器。 输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
功能清单写十页却没有一个能点的按钮。
把游戏逻辑放到需要后端的接口里。
七、带走这几句
- 第一次闭环：别人能玩，你也能讲清规则。
- 入门课用纯前端就够课堂演示，先别上服务器。
八、打勾再往下
- 我能演示过关。
- 我没有使用服务器。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
本课最小可玩更看重？
过关标准应该？
展示时优先？