第二单元 打地鼠

第5课 状态卡:用户·任务·变化

新创意:打地鼠。先写清谁在玩、点之前/点之后什么在变,再动手。

第5课 状态卡:用户·任务·变化
第5课 状态卡:用户·任务·变化
大约 40 分钟 这个单元:用五步做出能玩的打地鼠

第二款游戏登场:打地鼠。洞会冒头、点中加分,比纯按钮闯关更有「玩」的感觉。

先别写代码:用一张状态卡说清——点之前看见什么,点之后变成什么。

想清楚了再动手,返工会少一半。

一、这一课怎么学

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

二、学完你能做到

  • 能写出本游戏的用户与任务。
  • 能列出至少 3 种界面状态。
  • 能说明分数是一种状态。

三、弄懂这件事

这一课就这几小步:

1.用户与任务

先想清楚:这款打地鼠是给谁玩的?答案是本班同学。

任务要用动词写:在限定时间内点中地鼠,争取更高分。

用户和任务写清了,后面界面才不会堆一堆没用的零件。

2.界面为任务服务

界面上的东西都要为任务服务,而不是先追求炫。

最少要有:洞、地鼠、分数、倒计时、开始按钮。

多出来却帮不上忙的控件,这一课先别加。

3.状态要看得见

状态变化要写到「眼睛看得见」。

开始前分数是 0;打中后分数增加;时间到要显示结束。

同学一看就知道现在进行到哪一步,才算状态卡写对了。

下一课起会用到三个名字:HTML(有什么)、CSS(长什么样)、JS(点了会怎样)。这一课先把状态卡写清。

记一句:任务用动词写——谁在什么时间内做什么、怎样算赢。

点一点就明白

点下面的按钮,看屏幕上发生了什么。

四、先跟着做

对照例子想清楚

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

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

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

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

五、轮到你做

打地鼠状态草图

  1. 写用户一句、任务一句。

    做对了会怎样两句都写了;任务句有动词,如点、打中。

    做不出来怎么办用户:同学想打地鼠玩。任务:30 秒内多打地鼠。

  2. 画或列出 4 块界面。

    做对了会怎样说明里同时写到了分数和洞(或点哪里),别人能对上画面。

    做不出来怎么办界面四块可先写:开始、洞区、分数、结束。

  3. 写两种状态对照(开始前/打中后)。

    做对了会怎样点之前和点之后,页面上的分数数字不一样,能用眼睛看见变化。

    做不出来怎么办对照写:点之前 0 分,点中之后 1 分,这就是状态变化。

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

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

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

本节例子

下面整段是给 AI 的提示词示例:写清目标、范围和怎样算做成;请整段使用,不要只丢半句。工具嵌在下方。本课文件是 show/l05.html。

做单个 HTML 文件,标题「打地鼠·状态卡」。这是说明页,不要真游戏逻辑。

页面写清四块:
1)用户:一句话写谁在玩(例如本班同学)。
2)任务:一句话用动词写要做什么(例如 30 秒内多点中地鼠)。
3)界面:列出四块——开始、洞区、分数、结束。
4)状态对照:两行对比——开始前分数是多少;打中一次后分数变成多少(必须能用眼睛看见变化)。

排版清楚,适合投影;不要计时、不要随机出鼠、不要服务器。

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

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

六、小心这些错

只画好看图,不写状态变化。

把「所有人」写成用户——先写本班。

七、带走这几句

  • 写任务要用动词:点、加分、提交,别只写名词。
  • 状态要用眼睛能看见的变化来描述,例如分数 0→1。

八、打勾再往下

  • 我有状态草图。
  • 分数被当成状态。

小测验

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

  1. 状态最贴切的理解是?

  2. 打地鼠的核心任务更像?

  3. 开始按钮主要服务?