对照例子想清楚

1. 用自己的话重述本课成功标准。

   做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。

2. 指出哪一步必须自己点，不能听 AI 口头说完成。

   做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。

「点击闯关」五步流程卡

1. 抄五步，每步写点击闯关这一次要做什么。

   做对了会怎样五步都写了具体动作；第⑤步写的是「只改坏的那一处」，而不是整页推倒重来。

   做不出来怎么办第①步可先写成：同学打开页面，能点按钮换关并加分。第②步补上：单页、3 关、不要登录。

2. 红笔圈出最可能跳过的一步，并写防跳过办法。

   做对了会怎样你圈出的多半是④核验，并写了防跳过的具体动作。

   做不出来怎么办办法写成动作句：页面还没打开、按钮还没亲手点过，就不许说「做完了」。

3. 流程卡放进 notes。

   做对了会怎样流程卡保存在 notes 里，以后做打地鼠或别的游戏还能翻到同一套五步。

   做不出来怎么办文件名带上日期即可，例如 notes/五步-点击闯关-0411.md。

4. 用下面嵌着的氛围编程工具。写完在工具里看预览，文件是 show/l02.html。

   做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。

   做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。

做单个 HTML 文件，标题居中写「点击闯关·五步」。

按顺序用 1～5 列出做「点击闯关」小游戏时的五步。每一步要有短标题 + 一句完整说明（不要只写两个字口号）。内容必须和闯关有关，建议如下，可润色但不要改顺序：
1．想法：先想清楚同学打开后能做什么，例如点按钮换关并加分。
2．说清：写明范围——单页、大约 3 关、不要登录、不要服务器。
3．草稿：让 AI 先做出能打开、能点的最小一版。
4．核验：自己打开页面，用鼠标点按钮，确认换关和加分真的发生（不能只听 AI 说完成了）。
5．迭代：只改坏的那一处，改完再点一遍；不要整页推倒重来。

页底加一行：本课纯前端，不要服务器。
要求：排版清晰，适合课堂投影；不要做真游戏逻辑。

输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。