第一单元 点击闯关
第3课 纯前端边界：能做 / 先别做 / 不能做
创意可以大，这一课先画清：哪些纯前端现在做、哪些要服务端先别做、哪些永远不做。
创意可以飞，范围要落地：哪些纯前端现在做、哪些要服务端先别做、哪些永远不做。
联机排行榜很酷，但要服务器，会拖垮第一款能演示的游戏——上册先别碰。
虚假完成最危险：AI 说做完了，你却从没打开玩过。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 能给例子分进能做/先别做/不能做。
- 能指出一种虚假完成。
- 能写出本课红线：不要服务端、不要骗玩家。
三、弄懂这件事
这一课就这几小步：
1．为什么值得学
学氛围编程，是为了把脑子里的想法变成别人真能点着玩的页面。
同时练习两件事：怎样和 AI 协作写草稿，以及怎样自己验收。
会说清范围、会亲手点验，比只会背术语更有用。
2．三类边界（上册 = 纯前端）
能做：单机网页小游戏——HTML/CSS/JS 都在浏览器里，同学打开就能玩。
先别做：要服务器或全班联机、排行榜数据库的——留给下册或以后，别拖垮第一款能演示的成果。
不能做：钓鱼页面、抄别人整站当自己的——越过红线。
3．虚假完成
AI 说「完成了」，但你打开后按钮无效，这就是虚假完成。
只截一张图、不给人当场玩，也是虚假完成。
真正完成的标准是：别人能打开、能点、能看见规则说的变化。
点一点就明白
点下面的按钮，看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
边界卡 + 虚假完成对照
列出 2 个能做、1 个先别做、1 个不能做（游戏场景）。
做对了会怎样三类都有；先别做里出现联机或服务端。
做不出来怎么办能做：点击加分、本地计分；先别做：全班联机排行；不能做：骗同学扫码。
写一种虚假完成，并写你怎么识破。
做对了会怎样写出一种虚假完成，并写明用打开页面点一试来识破。
做不出来怎么办虚假：AI 说好了但分数不变。识破：打开页面自己点一试。
写一句本课承诺：纯前端。
做对了会怎样承诺里写明不要服务器或数据库（纯前端即可）。
做不出来怎么办可对照封面或本课「记一句」里关于纯前端、不要服务器的说法改写。
用下面嵌着的氛围编程工具。写完在工具里看预览，文件是
show/l03.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例：写清目标、范围和怎样算做成；请整段使用，不要只丢半句。工具嵌在下方。本课文件是 show/l03.html。
做单个 HTML 文件，页面分成三栏，标题分别为「能做」「先别做」「不能做」。 场景限定：同学做「网页点击闯关 / 小游戏」时的范围边界。每栏至少写两条完整句子（不要只写两个字）。 - 能做：例如单页点击加分、再来一局清零分数（纯前端能验收的）。 - 先别做：例如全班联机排行榜、自建后端存分数（进阶课再说）。 - 不能做：例如让 AI 代替自己打开页面点验；保证从不写 bug、不用人检查（虚假完成 / 甩锅）。 页底用醒目文字写：好看但点了没反应不算完成。 要求：三栏并排或上下分明，适合投影；不要真游戏逻辑；不要服务器。 输出要求：必须用 ```html 文件名 给出完整可运行 HTML（含 <style> 与需要的 <script>），不要只回复说明，不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容，不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
把「先别做」当成「永远不能做」。
用截图代替可玩演示。
七、带走这几句
- 范围三格要分清：能做、先别做、不能做，别混写。
- 虚假完成就是：嘴上说完成了，打开一点却经不起检验。
八、打勾再往下
- 我有一张边界卡。
- 我能指出一种虚假完成。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
本课默认「先别做」的是？
哪项是虚假完成？
不能做的是？