第二单元 打地鼠

第8课 完成:JS 行为收官(计时·出鼠·加分)

五步收官:计时、出鼠、加分都齐,能演示一局打地鼠。

第8课 完成:JS 行为收官(计时·出鼠·加分)
第8课 完成:JS 行为收官(计时·出鼠·加分)
大约 40 分钟 这个单元:用五步做出能玩的打地鼠

收官一局:计时开始、地鼠乱钻、点中加分、时间到喊停。

这就是完整最小打地鼠——拿去给同学玩,比只秀截图有说服力。

玩得过才算创意落地。

一、这一课怎么学

  • 开始前你要会:会打开浏览器,会打字。
  • 怎样算做完:完成「轮到你做」,并在嵌入工具里留下可预览文件。
  • 建议:先读「弄懂这件事」,再做练习。

二、学完你能做到

  • 有开始与计时。
  • 点中加分。
  • 能演示 30 秒。

三、弄懂这件事

这一课就这几小步:

1.计时和出鼠:必须靠 JS

完整最小打地鼠:开始 → 倒计时 → 随机出鼠 → 点击加分 → 时间到显示分数并可再来。

HTML 摆好零件,CSS 弄好看;倒计时、随机出鼠、结束再来这些「自己会动」的事,必须用 JavaScript(JS)。

单靠 HTML/CSS 做不出会记时的游戏。今天收官就是把 JS 这条线跑通。

2.验收清单

验收要用清单勾,不要凭感觉说「好像行」。

至少勾这三格:开始按钮有效;点空洞不会乱加分;结束后能再来一局。

哪一格勾不上,就只修那一处,再整局重玩。

3.展示

展示时先让同学玩一会儿,再讲你改过哪一处。

先玩再讲,比先念术语更有说服力。

单元成果的底线很简单:能给人当场玩。

记一句:计时与出鼠靠 JS;单元成果要能给人玩——截图代替不了亲手点。

四、先跟着做

对照例子想清楚

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

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

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

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

五、轮到你做

可玩打地鼠

  1. 写 4 条验收清单。

    做对了会怎样清单里同时勾到了计时和加分两项。

    做不出来怎么办清单四项:开始、出鼠、加分、结束。

  2. 做出可玩版并自测。

    做对了会怎样倒计时结束后,游戏有明确结束提示,不会一直空转。

    做不出来怎么办倒计时先固定写成 15 秒,跑通再谈可调。

  3. 封存 games/mole/index.html。

    做对了会怎样交给同学打开就能演示,不必再改代码。

    做不出来怎么办先做成单个 HTML 文件也可以,只要能打开能玩。

  4. 用下面嵌着的氛围编程工具。写完在工具里看预览,文件是 games/mole/index.html。

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

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

本节例子

工具打开时会先把上一课成果放进「代码」和「效果」。下面提示词请整段发送,在已有成果上小步改,不要整页重写。本课文件是 games/mole/index.html。

在当前打地鼠页上做成可玩一局(保留九个洞和分数,不要整页推倒重来):

- 点「开始」后 15 秒倒计时;
- 地鼠随机出现;只有点中「鼠」才加分;
- 时间到显示得分,并能再来一局。

不要服务器。

输出要求:即使只改外观,也必须用 ```html 文件名 输出完整 HTML 全文(保留原有 script 与结构),禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。

正在打开氛围编程工具…若长时间空白请强制刷新。

六、小心这些错

无计时却称完成。

点哪里都加分。

七、带走这几句

  • 计时和随机出鼠必须用 JS,单靠 HTML/CSS 做不到。
  • 展示前先把清单勾完,缺项就别说已经做完。

八、打勾再往下

  • 我能演示完整一局。
  • 我有验收清单。

小测验

对照上面「学完你能做到」选一个答案,再点「检查」。

  1. 打地鼠核心循环?

  2. 点空洞应该?

  3. 本单元技术边界?