第五单元 俄罗斯方块

第20课 从创意到游戏

上册最后一刻:激发你的创意——提出一款「还没做过」的新游戏设计,而不是只复盘旧作品。

第20课 从创意到游戏
第20课 从创意到游戏
大约 40 分钟 这个单元:做成可玩的方块,再把创意交棒到下一款游戏

五款课内游戏是「练功房」,不是终点。

今天的核心:想出一款你自己的新游戏——谁玩、怎么玩、怎样算做成——写进设计卡,并讲给同学听。

能讲清楚设计,才算真正走完「从创意到游戏」。

一、这一课怎么学

  • 开始前你要会:会打开浏览器,会打字;至少玩通过一款本册游戏。
  • 怎样算做完:写出新游戏设计卡,并在嵌入工具里留下可投影的一页。
  • 建议:先读「弄懂这件事」,再做练习;想法必须是你的,AI 只帮排版。

二、学完你能做到

  • 从课内五款游戏里,说出自己最想「变一变」的一处。
  • 提出一款新游戏:名称、谁玩、核心玩法、成功标准、v0 只做什么。
  • 用一页设计卡讲给同学听,别人听得懂、问得出问题。

三、弄懂这件事

这一课就这几小步:

1.创意从哪来

回头看:点击闯关、打地鼠、贪吃蛇、飞机大战、俄罗斯方块——每款都有「用户做什么 → 页面怎么变」。

创意不是凭空蹦出来的:可以换主题(校园、运动会)、换操作(点击变滑动)、换胜负(合作代替对战)。

先写三五个点子,再挑一个「纯前端、一节课能做出 v0」的下手。

2.设计卡五格

新游戏至少写清五格:①名称与一句话卖点 ②谁玩、在什么场景玩 ③核心循环(反复做什么) ④怎样算做成(别人能点验的标准) ⑤v0 只做哪一件事(其余进 v1)。

没有⑤就容易一口吃成胖子;没有④就分不清「好玩」和「做完了」。

想法与边界由你定;工具里的 AI 只帮你排版成好看的一页,不能替你想玩法。

3.讲给同学听

课堂上用 1 分钟讲:卖点 → 怎么玩 → v0 做什么。讲完问同学:「你听懂后最想先点哪里?」

听不懂的地方,改设计卡,不要急着写代码。

下一站下册走多人与发布;你今天的新游戏设计,可以带回家用同样五步继续做。

记一句:最后一刻不是复盘旧作,而是提出新游戏——想法你出,设计写清,v0 只做一件事。

四、先跟着做

对照例子想清楚

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

    做对了会怎样标准里必须出现「新游戏设计卡」和「别人听得懂」,而不是「演示旧方块」。

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

    做对了会怎样你明确写出:玩法、名称、成功标准必须自己想;AI 只能排版,不能替你定创意。

五、轮到你做

新游戏设计卡

  1. 先列 3 个点子(可换皮、可换操作、可换胜负),圈定 1 个做本课正式提案。

    做对了会怎样三个点子都写了「谁玩 + 做什么」;圈定的那一个能用一句话说清卖点。

    做不出来怎么办从课内游戏改一处:例如「打地鼠」改成「接飞盘」、只保留计时与点击。

  2. 填满设计卡五格:名称卖点、谁玩、核心循环、成功标准、v0 只做一件事。

    做对了会怎样五格都有完整句子;成功标准能让同学打开页面点几下就核对。

    做不出来怎么办成功标准先写成:打开页面 → 点某个按钮 → 分数或状态可见变化。

  3. 用 1 分钟讲给同桌听,记下对方「最想先点哪里」,必要时改设计卡。

    做对了会怎样你记下了对方的一句反馈,并改了设计卡里至少一处。

    做不出来怎么办先问对方:「如果只给你 10 秒,你会点哪里?」把答案写进 v0。

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

    做对了会怎样预览里能看见你的游戏名、五格设计与「想法是我自己的」声明,适合投影。

    做不出来怎么办把五格原文贴进提示词;文件名必须是 show/l20-idea.html,改完再刷新预览。

本节例子

下面整段是给 AI 的提示词示例:写清目标、范围和怎样算做成;请整段使用,不要只丢半句。工具嵌在下方。本课文件是 show/l20-idea.html。把【】里换成你自己的创意。

做单个 HTML 文件,标题居中写「从创意到游戏·我的新设计」。

用清晰大卡片排出五格(可润色文字,但内容必须来自学生自己的想法,不要替学生发明玩法):
1.名称与卖点:【你的游戏名】——【一句话为什么好玩】
2.谁玩:【谁、在什么场景】
3.核心循环:玩家反复做什么 → 页面怎样变化
4.怎样算做成:别人打开页面点几下就能核对的标准(写具体动作,不要形容词)
5.v0 只做一件事:【本周最小可玩】;其余功能写进「以后再做」列表(至少 2 条)

页底两行:① 想法与规则是我自己定的;AI 只帮排版。② 本课纯前端,不要服务器。
要求:适合课堂投影;不要做真游戏逻辑,只要设计卡。

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

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

六、小心这些错

只复盘旧方块、不提出新游戏。

让 AI 直接编一个「很酷」的玩法,自己说不清谁玩、怎样算做成。

v0 一口气写十个功能,没有「只做一件事」。

七、带走这几句

  • 上册最后一刻:从创意到游戏——提出新设计,激发你自己的想法。
  • 设计卡五格写清,再动手;想法你出,AI 只排版。

八、打勾再往下

  • 我提出了一款新游戏,并写满设计卡五格。
  • 我讲给同学听过,并留下可预览的设计卡页。

小测验

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

  1. 本课最核心的任务是?

  2. 设计卡里,谁该决定玩法?

  3. v0 更好的写法是?