第二单元 打地鼠
第5课 状态卡:用户·任务·变化
新创意:打地鼠。先写清谁在玩、点之前/点之后什么在变,再动手。
第二款游戏登场:打地鼠。洞会冒头、点中加分,比纯按钮闯关更有「玩」的感觉。
先别写代码:用一张状态卡说清——点之前看见什么,点之后变成什么。
想清楚了再动手,返工会少一半。
一、这一课怎么学
- 开始前你要会:会打开浏览器,会打字。
- 怎样算做完:完成「轮到你做」,并在嵌入工具里留下可预览文件。
- 建议:先读「弄懂这件事」,再做练习。
二、学完你能做到
- 能写出本游戏的用户与任务。
- 能列出至少 3 种界面状态。
- 能说明分数是一种状态。
三、弄懂这件事
这一课就这几小步:
1.用户与任务
先想清楚:这款打地鼠是给谁玩的?答案是本班同学。
任务要用动词写:在限定时间内点中地鼠,争取更高分。
用户和任务写清了,后面界面才不会堆一堆没用的零件。
2.界面为任务服务
界面上的东西都要为任务服务,而不是先追求炫。
最少要有:洞、地鼠、分数、倒计时、开始按钮。
多出来却帮不上忙的控件,这一课先别加。
3.状态要看得见
状态变化要写到「眼睛看得见」。
开始前分数是 0;打中后分数增加;时间到要显示结束。
同学一看就知道现在进行到哪一步,才算状态卡写对了。
下一课起会用到三个名字:HTML(有什么)、CSS(长什么样)、JS(点了会怎样)。这一课先把状态卡写清。
点一点就明白
点下面的按钮,看屏幕上发生了什么。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准,别人打开页面点几下就能核对是不是做到了,而不是只有形容词。
指出哪一步必须自己点,不能听 AI 口头说完成。
做对了会怎样你明确写出:必须自己打开页面点一遍;AI 口头说「完成了」不能算数。
五、轮到你做
打地鼠状态草图
写用户一句、任务一句。
做对了会怎样两句都写了;任务句有动词,如点、打中。
做不出来怎么办用户:同学想打地鼠玩。任务:30 秒内多打地鼠。
画或列出 4 块界面。
做对了会怎样说明里同时写到了分数和洞(或点哪里),别人能对上画面。
做不出来怎么办界面四块可先写:开始、洞区、分数、结束。
写两种状态对照(开始前/打中后)。
做对了会怎样点之前和点之后,页面上的分数数字不一样,能用眼睛看见变化。
做不出来怎么办对照写:点之前 0 分,点中之后 1 分,这就是状态变化。
用下面嵌着的氛围编程工具。写完在工具里看预览,文件是
show/l05.html。做对了会怎样在嵌着的工具预览里,你能亲眼看见本课要求的按钮、分数或流程文字,而不是只有说明。
做不出来怎么办先在预览里自己点一遍;文件名必须和例子上写的完全一样,改完再刷新预览。
本节例子
下面整段是给 AI 的提示词示例:写清目标、范围和怎样算做成;请整段使用,不要只丢半句。工具嵌在下方。本课文件是 show/l05.html。
做单个 HTML 文件,标题「打地鼠·状态卡」。这是说明页,不要真游戏逻辑。 页面写清四块: 1)用户:一句话写谁在玩(例如本班同学)。 2)任务:一句话用动词写要做什么(例如 30 秒内多点中地鼠)。 3)界面:列出四块——开始、洞区、分数、结束。 4)状态对照:两行对比——开始前分数是多少;打中一次后分数变成多少(必须能用眼睛看见变化)。 排版清楚,适合投影;不要计时、不要随机出鼠、不要服务器。 输出要求:必须用 ```html 文件名 给出完整可运行 HTML(含 <style> 与需要的 <script>),不要只回复说明,不要只贴 CSS/JS 片段。页面打开后要立刻看得见内容,不要只有标题和大空框。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
只画好看图,不写状态变化。
把「所有人」写成用户——先写本班。
七、带走这几句
- 写任务要用动词:点、加分、提交,别只写名词。
- 状态要用眼睛能看见的变化来描述,例如分数 0→1。
八、打勾再往下
- 我有状态草图。
- 分数被当成状态。
小测验
对照上面「学完你能做到」选一个答案,再点「检查」。
状态最贴切的理解是?
打地鼠的核心任务更像?
开始按钮主要服务?