feat: 新增 AICODE-06 魔幻俄罗斯方块第6-7课教案及 demo

- AICODE06-06 魔幻俄罗斯方块(上):工程师思维启蒙,Level 0 需求文档 + 压力测试 + 结果溯源
- AICODE06-07 魔幻俄罗斯方块(下):增量需求文档 + 魔改升级 + 成果路演
- demo/demo-level0.html:完整基础俄罗斯方块(含虚影、暂停、升级)
- demo/demo-level1-bomb.html:炸弹方块示例(含粒子爆炸特效)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Rocky
2026-04-09 14:37:58 +02:00
parent d91d1fe571
commit 4f95086d55
4 changed files with 1788 additions and 0 deletions

View File

@@ -0,0 +1,396 @@
---
课时: 6
主题: 魔幻俄罗斯方块(上)— 工程师思维启蒙
核心能力: [提问力, 拆解力]
核心工具: [Kimi 2.5]
时长: 90分钟
透明化层级: 过程层
适用路线: AICODE-06
---
### 1. 课程目标
**知识目标:**
- 理解「需求文档」的作用:把脑子里的想法变成 AI 能准确执行的指令
- 理解「需求质量 = 输出质量」AI 做出来的结果不符合预期,根本原因是需求没说清楚
- 理解需求是迭代的过程,不是一次写完就能用
**能力目标:**
- 能通过「侦探模式」分析一个游戏的规则,并用文字描述出来(拆解力)
- 能用 AI 对话主动「压力测试」自己的需求文档,发现描述漏洞(提问力)
- 能在看到生成结果后,定位是哪条需求没说清楚,修改并重新生成(共创力)
**情感目标:**
- 建立「先想清楚再动手」的工程师直觉,体验「需求清晰 → 结果可预期」的成就感
- 对「自己也能做出一个游戏」产生真实的兴奋感
- 建立「结果不对 = 需求没说清楚」而不是「AI 不行」或「我不行」的归因习惯
---
### 2. 核心概念与误概念预设
**核心概念认知层级:**
| 概念 | 学生类比 | 认知层级 |
|------|---------|---------|
| 需求文档 | 装修前给师傅的设计图——口头说「弄好看点」和给一张详细图纸,结果完全不同 | 理解层 |
| 需求压力测试 | 考试前找同学互出题——让别人挑毛病比自己检查更有效 | 应用层 |
| 结果溯源 | 菜做咸了,往回找:是盐放多了,还是酱油放多了?找到根源才能改 | 应用层 |
| 需求迭代 | 第一版草稿 → 发现问题 → 修改 → 第二版,就像改作文 | 理解层 |
**典型误概念表:**
| 编号 | 误概念 | 正确认知 | 激发策略 |
|------|--------|---------|---------|
| M1 | 直接告诉 AI「帮我做一个俄罗斯方块」就够了 | 不写需求文档AI 会自己猜所有细节,结果可能跟你想的完全不同 | 课堂实验:先不写需求文档直接生成,再写了需求文档生成,对比两个结果的差距 |
| M2 | 需求文档写完就是写好了,直接提交 | 写完只是第一步,要经过压力测试才能发现漏洞 | 用「压力测试」提示词,让 AI 提出学生自己没想到的问题 |
| M3 | AI 做出来的结果不对是 AI 的问题 | 结果不对说明需求里有没说清楚的地方 | 「你的需求文档里有没有写这一条?」——让学生自己发现根本没写 |
| M4 | 需求文档要写得很长很详细 | 精准 > 冗长。需求要「可测试」:能说出什么情况下算做对了 | 「你这条需求,我怎么知道 AI 做没做对?」 |
| M5 | 先动手做,遇到问题再想 | 先想清楚的时间,会节省后面改来改去的时间 | 对比两种路径的时间消耗:「先做 → 改 → 改 → 改」vs「先想清楚 → 做 → 小改」 |
---
### 3. 教学准备
**工具与环境:**
- 每台电脑已登录 Kimi 2.5,网络正常
- 每台电脑可以正常运行 HTML 文件(浏览器打开)
- 投影可切换至任意学生屏幕
**教学资源:**
- 教师准备:一个真实可玩的俄罗斯方块网页版(课堂演示用,备用链接)
- 教师准备「压力测试」提示词见第5节投屏展示
- 教师准备一份「没写需求文档」直接生成的俄罗斯方块演示提前生成好展示各种「AI 自作主张」的细节)
- 教师准备Level 0 需求文档模板见第5节发给学生
- 学生资源:无需提前准备
**教师备课体验任务:**
> 备课前,教师必须亲自完成以下操作:
>
> 1. 用一句话「帮我做一个俄罗斯方块」提交给 Kimi保存生成结果记录哪些细节是 AI 自己决定的
> 2. 写一份 Level 0 需求文档,走完「压力测试 → 完善 → 提交生成 → 验收 → 发现问题 → 溯源 → 修改 → 第二版」全流程,记录卡在哪里
> 3. 准备好 2-3 个「需求没说清楚」的典型例子(比如「消行规则写了但没写消多行的得分」)
---
### 4. 教学流程
**第一幕:联系 (Connect) — 10分钟** 🔗
**【环节】侦探模式导入 (10分钟)**
**师:** 今天我们要做一个游戏。但在做之前,先玩两分钟。
【投屏展示俄罗斯方块,或让学生在自己电脑上打开】
**师:** 你们的任务不是拿高分,而是当侦探——把这个游戏所有的规则找出来,写在纸上。你能找到多少条就写多少条。两分钟,开始。
【学生玩游戏同时记录规则,教师走动观察学生找到了哪些规则】
**师:** 好,停。谁来说一条规则?
**生:** 方块会往下落。
**师:** 好,这是一条。还有呢?
**生:** 可以左右移动,可以旋转。满一行就消掉。
**师:** 不错。这些都是游戏规则。现在我问一个问题——如果我让 AI 帮我做这个游戏,我直接说「帮我做一个俄罗斯方块」,你们觉得 AI 能做出来吗?
**生:** 能!/ 应该能?
**师:** 我们来试试。
【投屏展示教师提前生成的「一句话版」俄罗斯方块】
**师:** 做出来了。但你们来找找看,这个游戏里,有没有什么地方跟你心里想的「俄罗斯方块」不一样?
【诊断点:学生是否能发现 AI 自作主张的细节——比如得分规则、速度、旋转方向等】【识别层】
**【分支A】若学生发现了不同的地方**
**师:** 你发现了。为什么 AI 做出来跟你想的不一样?
**生:** 因为我没有告诉它……
**师:**你没说AI 就自己猜了一个。今天我们要学的,就是怎么把「脑子里的游戏」变成 AI 能准确执行的指令。这个东西叫需求文档。
**【分支B】若学生觉得「都一样没问题」**
**师:** 那我问你——这个游戏消一行得多少分?消四行一次呢?
**生:** (去看)……好像是 100 分?
**师:** 你想要的是这个分数吗?
**生:** 我没想过……
**师:** 你没想过AI 就帮你决定了。如果你想要自己的规则,就需要告诉 AI。这就是需求文档的意义。
---
**第二幕:建构 (Construct) — 65分钟** 🛠️
**【分段一:写 Level 0 需求文档】(20分钟)**
**预设误概念:**
- 误概念 M1「帮我做俄罗斯方块」就够了不需要写文档
- 误概念 M4需求文档要写得很长很全面
**讲解与演示 (Teach & Demo): (5分钟)**
**师:** 现在我们要写一份需求文档。我给你们一个模板,里面有 5 个必须填的部分。
【投屏展示 Level 0 需求文档模板见第5节】
**师:** 这 5 个部分,每一个都是 AI 「必须知道才能做对」的信息。我们来看第一条——游戏区域:宽多少列、高多少行?
**生:** 10×20
**师:** 这是默认值,但你可以改。重点是:你必须明确告诉 AI否则它自己决定。
**师:** 有一个原则:每条需求,你都要能说出「什么样的结果算做对了」。比如「消行规则:横向填满一整行就消除」——这条我怎么测试?
**生:** 把一行填满,看它有没有消掉。
**师:** 对,这条可以被测试。好的需求就是这样——写完之后,你知道怎么验收。
【理解层:建立「需求可测试性」的直觉】
**学生实践 (Practice): (13分钟)**
学生独立填写 Level 0 需求文档模板,完成 5 个必填部分。
> 教师走动观察重点:
> - 是否有学生在「移动规则」里只写了「可以左右移动」,但没写「碰到边界怎么处理」?
> - 是否有学生在「消行规则」里写了消行但没写「消多行的得分是否不同」?
> - 这些漏洞不要直接告诉学生,留给下一步「压力测试」去发现
**进度同步 (Checkpoint): (2分钟)**
**师:** 5个部分都填完的举手。
**师:**你觉得你的需求文档AI 能根据它做出你想要的游戏吗?
**生:** 应该可以?
**师:** 我们来测试一下你写的文档够不够清楚。
---
**【分段二AI 压力测试 → 完善需求文档】(15分钟)**
**预设误概念:**
- 误概念 M2需求文档写完就可以直接提交了
- 误概念 M3AI 生成不对是 AI 的问题
**讲解与演示 (Teach & Demo): (3分钟)**
**师:** 接下来用一个技巧——让 AI 扮演挑剔的工程师,来「审问」你的需求文档。
【投屏展示「压力测试」提示词见第5节】
**师:** 注意这里:不是让 AI 帮你补全需求,是让 AI 问你问题。这两个完全不同——一个是 AI 替你决定,一个是 AI 帮你发现你自己没想到的地方。
**师:** 我来演示一次。
【教师用自己的需求文档执行压力测试,展示 AI 提出的问题列表】
**师:** AI 问了我哪些问题?有哪些是你们的需求文档里也没有答的?
**学生实践 (Practice): (10分钟)**
1. 学生把自己的需求文档粘贴进「压力测试」提示词,提交 Kimi
2. 把 AI 提出的问题复制到文档里
3. 逐条回答——每个问题写上自己的答案,补充进需求文档
> 教师走动观察:学生是否对某个问题感到惊讶——「这个我真的没想过」是好的信号
**进度同步 (Checkpoint): (2分钟)**
**师:** AI 问了你最意外的是哪个问题?
**生:** 分享1-2条
**师:** 如果不补上这条AI 会自己猜一个答案。那个答案不一定是你想要的。
【识别层建立「每个没说清楚的地方AI 都会自己决定」的意识】
---
**【分段三:提交生成 → 验收 → 结果溯源】(20分钟)**
**预设误概念:**
- 误概念 M3生成完了就算完成了不需要验收
- 误概念 M3结果不对直接改代码
**讲解与演示 (Teach & Demo): (3分钟)**
**师:** 需求文档完善好了,现在提交给 Kimi 生成。但是——生成完不等于完成。生成完之后要做一件事:按需求文档逐条验收。
**师:** 验收方法:你需求文档里写了什么,就测什么。比如你写了「满一行消除」,就在游戏里把一行填满,看它消没消。
**师:** 遇到「结果跟预期不一样」时,**先不要让 AI 改代码**。先做一个动作:找回需求文档,找到是哪一句话没说清楚。这叫结果溯源。
**学生实践 (Practice): (14分钟)**
1. 把完善后的需求文档提交 Kimi 生成游戏
2. 运行游戏,对照需求文档逐条测试
3. 遇到「结果跟预期不一样」时:
- 回到需求文档
- 找到是哪条需求没说清楚,或者根本没写
- 标注「这里有问题原因___」
- 修改需求文档,重新提交生成第二版
> 教师走动观察重点:
> - 学生测试完一条直接跳过 → 走过去问「这条算做对了吗?你的需求是怎么写的?」
> - 学生说「不对」但直接让 AI 改代码 → 叫停,引导回到需求文档:「先找找是哪条需求没说清楚」
**进度同步 (Checkpoint): (3分钟)**
**师:** 谁的第二版比第一版有改善?具体改了什么,改完效果怎样?
【诊断点:学生是否能量化进步——不是「感觉好多了」,而是「之前 XXX 不对,改了需求之后 XXX 对了」】【应用层】
**【分支A】若学生能说出具体改善**
**师:** 这个进步是因为你把需求文档的 XXX 改得更具体了。记住这个感觉——这就是需求驱动输出。
**【分支B】若学生说「改了但没变化」**
**师:** 说明改的地方不是真正的根源。我们再来找——测试结果里还有哪里跟预期不一样?
【帮学生重新溯源,找到真正的问题所在】
---
**【分段四:自由探索 + 下节课铺垫】(10分钟)**
**学生实践 (Practice): (7分钟)**
游戏基本跑起来了之后,学生自由探索:
- 改一下游戏配色,让它更好看
- 或者调整一下速度和得分规则
**师:** 你现在手上有一个可以玩的俄罗斯方块了。下节课,你们可以给它加一个你自己想要的功能。现在开始想——你想给你的游戏加什么?
【诊断点:观察学生自然产生的功能需求,作为下节课教学素材】
学生说出 1-2 个想加的功能(不要求写清楚,只是发散):
- 「我想加个炸弹,可以炸掉一行」
- 「我想让方块会变色」
- 「我想加个 Boss」
**进度同步 (Checkpoint): (3分钟)**
**师:** 说说你想加什么,一句话就行。
(每人说一个,教师快速记录在白板/投屏上)
**师:** 下节课,你们每个人选一个功能,用今天学到的方法——写需求文档、压力测试、生成、验收——把这个功能加进去。
---
**第三幕:反思 (Contemplate) — 10分钟** 🤔
**【环节】成果展示 (6分钟)**
**师:** 谁来展示一下你今天做的游戏?
(邀请 2 名学生展示,展示重点不只是游戏本身,还要说:)
- 你的需求文档里加了什么特别的设计?
- AI 压力测试问了你什么最意外的问题?
- 第一版和第二版有什么不同?
**【环节】互评 (4分钟)**
**师:** 看完 XXX 同学的游戏,你们能不能从他的需求文档里找出一个还没说清楚的地方?
【诊断点:学生是否建立了「挑剔工程师」的眼光】
**师:** 今天最难描述清楚的规则是什么?你最后是怎么写清楚的?
---
**第四幕:延续 (Continue) — 5分钟** 🚀
**【环节】抽象总结 (3分钟)**
**师:** 今天我们做了什么?
**生:** 做了一个俄罗斯方块。
**师:** 对,但更重要的是用什么方法做的?
**生:** 写了需求文档,然后让 AI 做……
**师:** 对。我们今天学的这个方法,有一个名字——工程师思维。工程师做任何事情之前,都先把「要做什么」说清楚。说清楚了,才开始动手。
**师:** 今天这个能力,不只是做游戏用——以后让 AI 做任何事,需求越清晰,结果越接近你想要的。
**【环节】下节预告 + 5分钟挑战 (2分钟)**
**师:** 下节课,每人选一个你想加的功能,用同样的方法——写需求文档、压力测试、生成、验收——把它加进你的俄罗斯方块里。你的游戏会跟任何人的都不一样。
**师:** 本周5分钟挑战想好你下节课要加的功能是什么在脑子里想一想这个功能如果要写需求文档最难描述清楚的是哪一条不用写想一想就行下节课说给我听。
---
### 5. AI 助教使用指南
**Level 0 需求文档模板(发给学生填写):**
```
# 我的俄罗斯方块 · Level 0 需求文档
## 游戏区域
- 宽___列默认10×___行默认20
## 方块移动规则
- 左移按___键
- 右移按___键
- 旋转按___键
- 快速下落按___键
- 碰到左右边界___停止/不能再往那边移)
- 碰到底部或其他方块___固定在原地
## 消行规则
- 触发条件___横向填满整行
- 消行后上方积木___全部下移一行
- 消1行得___分消2行得___分消4行一次得___分
## 关卡与速度
- 初始速度每___毫秒下落一格默认800
- 每消___行升一级
- 每升一级速度加快___毫秒
## 游戏结束条件
- 什么时候结束___积木堆到顶部
- 结束后显示___游戏结束画面 + 最终得分)
```
**「压力测试」提示词:**
```
我写了一份俄罗斯方块的需求文档,内容如下:
[粘贴你的需求文档]
请你扮演一个非常挑剔的工程师,读完这份文档后,
找出所有你觉得「没有说清楚」「可以有多种理解」「遇到特殊情况不知道怎么处理」的地方,
用问题的形式列出来(每条一行,以问号结尾)。
不要帮我回答这些问题,不要帮我修改文档,只负责提问。
```
**「结果溯源」引导提示词(发现结果不对时使用):**
```
我的游戏运行结果和我的预期不一样。
具体表现:[描述不对的现象]
我预期应该是:[描述你想要的结果]
我的需求文档里关于这个功能写的是:[粘贴相关需求]
请帮我分析:是需求描述不够清楚,还是需求里根本没写这条规则?
不要帮我修改代码,只帮我找出需求文档里的问题。
```
**「提交生成」提示词(正式版):**
```
请根据以下需求文档,用单个 HTML 文件(内联 CSS 和 JS做一个俄罗斯方块游戏。
要求:严格按照需求文档实现,不要添加文档里没有提到的功能。
需求文档:
[粘贴你的完整需求文档]
```
---
### 6. 教师指南
**本课技术备注:**
单文件 HTML 策略:所有代码写在一个 `index.html` 文件里CSS 和 JS 全部内联。学生双击就能运行不需要任何服务器或安装。Kimi 2.5 生成单文件俄罗斯方块稳定性高,是这门课的最佳选择。
俄罗斯方块核心数据结构(教师理解用,不讲给学生):游戏核心是一个二维数组代表游戏区域,每个格子存 0或颜色值有方块。方块用形状矩阵 + 当前位置表示。学生不需要理解这些,只需要知道「我的需求文档决定了游戏的行为」。
**常见问题 FAQ**
| 问题 | 应对 |
|------|------|
| 「Kimi 生成的代码打开没有反应」 | 检查文件是否保存为 .html 格式;用浏览器(不是记事本)打开 |
| 「方块可以移动出边界」 | 需求文档里「碰到边界怎么处理」这条没写清楚,引导学生溯源并补充 |
| 「消行了但积木没有下移」 | 需求文档里消行后的处理没说清楚,引导溯源 |
| 「游戏结束了但还能继续操作」 | 需求文档里游戏结束条件对应的处理没写,引导补充「结束后禁止操作」 |
| 「我想直接改代码」 | 「你能看懂这段代码是做什么的吗?如果不能,改了可能引发新的问题。先改需求文档,让 AI 重新生成更安全。」 |
**课堂风险预案:**
- 如果 Kimi 一次生成就完全符合预期:恭喜学生,但仍要做压力测试——「这次 AI 猜对了,你能保证下次加新功能时也能猜对吗?」需求文档的价值在于每次都可预期,不只是修复当次问题。
- 如果学生进度差异很大:进度快的学生开始探索「想加什么功能」并尝试写第一版 Level 1 需求文档;进度慢的学生只要完成「生成 + 发现一个问题 + 溯源到需求」这个最小闭环即可。
---
### 7. 5分钟日常AI挑战
**本周挑战:** 想好下节课要加的功能
**挑战说明:** 不用动手,只是想一想:你的俄罗斯方块下节课要加什么功能?这个功能最难描述清楚的是哪一条规则?在脑子里想好,下节课说给老师和同学听。
**下节课分享:** 课前每人说出自己想加的功能,以及预感最难写清楚的那条需求
---
### 8. 拓展任务
**拓展一(推荐):** 给你的游戏加一个「下一个方块预览」功能——把这个功能写成需求文档,测试一下 AI 能不能做出来
**拓展二(挑战):** 给你的游戏加一个「最高分记录」功能——玩完之后会记住历史最高分,下次打开还在