第二单元 打地鼠
第8课 完成:JS 行为收官(计时·出鼠·加分)
五步收官:计时、出鼠、加分都齐,能演示一局打地鼠。
收官一局:计时开始、地鼠乱钻、点中加分、时间到喊停。
这就是完整最小打地鼠——拿去给同学玩,比只秀截图有说服力。
玩得过才算创意落地。
一、这一课怎么学
- 开始前你要会:会打开浏览器,会打字。
- 怎样算做完:完成「轮到你做」,并在嵌入工具里留下可预览文件。
- 建议:先读「弄懂这件事」,再做练习。
二、学完你能做到
- 有开始与计时。
- 点中加分。
- 能演示 30 秒。
三、弄懂这件事
这一课就这几小步:
1.计时和出鼠:必须靠 JS
完整最小打地鼠:开始 → 倒计时 → 随机出鼠 → 点击加分 → 时间到显示分数并可再来。
HTML 摆好零件,CSS 弄好看;倒计时、随机出鼠、结束再来这些「自己会动」的事,必须用 JavaScript(JS)。
单靠 HTML/CSS 做不出会记时的游戏。今天收官就是把 JS 这条线跑通。
2.验收清单
验收要用清单勾,不要凭感觉说「好像行」。
至少勾这三格:开始按钮有效;点空洞不会乱加分;结束后能再来一局。
哪一格勾不上,就只修那一处,再整局重玩。
3.展示
展示时先让同学玩一会儿,再讲你改过哪一处。
先玩再讲,比先念术语更有说服力。
单元成果的底线很简单:能给人当场玩。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准,别人打开页面点几下就能核对是不是做到了,而不是只有形容词。
指出哪一步必须自己点,不能听 AI 口头说完成。
做对了会怎样你明确写出:必须自己打开页面点一遍;AI 口头说「完成了」不能算数。
五、轮到你做
可玩打地鼠
写 4 条验收清单。
做对了会怎样清单里同时勾到了计时和加分两项。
做不出来怎么办清单四项:开始、出鼠、加分、结束。
做出可玩版并自测。
做对了会怎样倒计时结束后,游戏有明确结束提示,不会一直空转。
做不出来怎么办倒计时先固定写成 15 秒,跑通再谈可调。
封存 games/mole/index.html。
做对了会怎样交给同学打开就能演示,不必再改代码。
做不出来怎么办先做成单个 HTML 文件也可以,只要能打开能玩。
用下面嵌着的氛围编程工具。写完在工具里看预览,文件是
games/mole/index.html。做对了会怎样在嵌着的工具预览里,你能亲眼看见本课要求的按钮、分数或流程文字,而不是只有说明。
做不出来怎么办先在预览里自己点一遍;文件名必须和例子上写的完全一样,改完再刷新预览。
本节例子
工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送,在已有成果上小步改,不要整页重写。本课文件是 games/mole/index.html。
在当前打地鼠页上做成可玩一局(保留九个洞和分数,不要整页推倒重来): - 点「开始」后 15 秒倒计时; - 地鼠随机出现;只有点中「鼠」才加分; - 时间到显示得分,并能再来一局。 不要服务器。 输出要求:即使只改外观,也必须用 ```html 文件名 输出完整 HTML 全文(保留原有 script 与结构),禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
无计时却称完成。
点哪里都加分。
七、带走这几句
- 计时和随机出鼠必须用 JS,单靠 HTML/CSS 做不到。
- 展示前先把清单勾完,缺项就别说已经做完。
八、打勾再往下
- 我能演示完整一局。
- 我有验收清单。
小测验
对照上面「学完你能做到」选一个答案,再点「检查」。
打地鼠核心循环?
点空洞应该?
本单元技术边界?