feat: 新增涂鸦PK四课教案（第8-11课）及大纲更新
- 新增 AICODE06-08~11 完整逐字稿教案（每课600+行） - 涂鸦PK主题：画图工具→基础对战→动画音效→班级锦标赛 - 核心工程思维：需求驱动→测试验证→增量迭代→数据驱动 - 更新 AICODE-06 课程大纲，追加第8-11课内容 - 新增 demo-pk/ 目录（画图工具/对战/动画三个demo） Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Rocky
621
3-lessons/AICODE-06/AICODE06-10 涂鸦PK（三）— 动画 + 音效 + 特技.md
Normal file
621
3-lessons/AICODE-06/AICODE06-10 涂鸦PK（三）— 动画 + 音效 + 特技.md
Normal file
@@ -0,0 +1,621 @@
|
||||
---
|
||||
课时: 10
|
||||
主题: 涂鸦PK（三）— 动画 + 音效 + 特技
|
||||
核心能力: [审美力, 提问力]
|
||||
核心工具: [Trae IDE, Kimi]
|
||||
时长: 90分钟
|
||||
透明化层级: 过程层
|
||||
适用路线: AICODE-06
|
||||
---
|
||||
|
||||
### 1. 课程目标
|
||||
|
||||
**知识目标：**
|
||||
- 理解「游戏感（Game Feel）」的概念：每次操作必须有视觉反馈，玩家才知道自己的行动生效了
|
||||
- 理解「增量需求」的写法：在已有系统上叠加新功能，只描述新增部分，避免 AI 误改已验收的代码
|
||||
- 理解 Web Audio API 的核心思想：用纯代码合成音效，不需要任何音频文件
|
||||
|
||||
**能力目标：**
|
||||
- 能用「感觉语言」描述动画需求（「快速冲过去然后弹回来」），让 AI 把感觉翻译成代码参数（审美力）
|
||||
- 能写出增量需求文档，只描述新增的动画/音效，不重写已有战斗逻辑（提问力）
|
||||
- 能在 AI 生成代码后，通过视觉对比和试玩，判断动画「感觉对不对」并给出精准修改意见（审美力）
|
||||
|
||||
**情感目标：**
|
||||
- 对「同样的游戏，有没有动画，体验天差地别」产生真实感受——建立「视觉反馈是游戏的灵魂」的审美直觉
|
||||
- 体验到「我说出一种感觉，AI 把它变成了代码」的成就感，增强自然语言驱动开发的自信
|
||||
- 对下节课的班级对战产生期待感
|
||||
|
||||
---
|
||||
|
||||
### 2. 核心概念与误概念预设
|
||||
|
||||
**核心概念认知层级：**
|
||||
|
||||
| 概念 | 学生类比 | 认知层级 |
|
||||
|------|---------|---------|
|
||||
| 游戏感（Game Feel） | 打篮球投篮时「嗖」一声进了网——同样进了，但有没有这个声音感觉完全不一样 | 理解层 |
|
||||
| 增量需求 | 你去装修只告诉工人「加一个书架」，不需要重新描述整个房子的结构 | 理解层 |
|
||||
| 感觉语言→参数翻译 | 给厨师说「要辣一点」而不是「加5克辣椒粉」——厨师懂怎么翻译成具体操作 | 应用层 |
|
||||
| Web Audio 合成音效 | 用嘴巴「嗖——」发出声音，不需要找一个录好的「嗖」的音频文件 | 理解层 |
|
||||
| 特技视觉标记 | 超市商品的标签——没有标签你看不出这是打折商品；特技没有特效，玩家感知不到它生效了 | 应用层 |
|
||||
|
||||
**典型误概念表：**
|
||||
|
||||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||||
|------|--------|---------|---------|
|
||||
| M1 | 动画只是装饰，不影响游戏质量 | 动画是「游戏感」的核心：每次操作必须有视觉反馈，玩家才知道自己的行动生效了 | 展示对比：无动画（只有数字变化）vs 有动画（角色冲刺），问学生哪个更爽 |
|
||||
| M2 | 音效需要找音频文件，太麻烦了 | Web Audio API 用纯代码合成音效，零素材依赖，浏览器内置支持 | 演示：三行代码合成一个攻击音效，不需要任何音频文件 |
|
||||
| M3 | 增量需求要把整个需求文档重写一遍 | 增量需求只写新增的部分；已验收的功能不重写，避免 AI 误改 | 类比：装修只说「加书架」，不需要重新描述整个房子 |
|
||||
| M4 | 动画描述必须用技术参数（duration: 200ms） | 先用感觉描述（「快速冲过去然后弹回来」），AI 把感觉翻译成参数；感觉描述比参数描述更准确 | 让学生先说出感觉，再看 AI 翻译的参数，对比哪种方式更自然 |
|
||||
| M5 | 特技效果只要触发就行，不需要视觉区分 | 特技必须有独特的视觉效果，玩家才能感知到特技生效了（如燃烧 = 橙色粒子，冰冻 = 蓝色闪烁） | 问：「如果燃烧特技触发了但什么都没发生，你怎么知道它触发了？」 |
|
||||
|
||||
---
|
||||
|
||||
### 3. 教学准备
|
||||
|
||||
**工具与环境：**
|
||||
- 每台电脑已安装 Trae IDE，可正常打开上节课（第9课）的战斗游戏文件
|
||||
- 每台电脑浏览器可正常播放 Web Audio（Chrome/Edge 均支持，确认未被系统静音）
|
||||
- 投影可切换至任意学生屏幕
|
||||
- 准备两个演示文件：`demo-2-pk-battle.html`（无动画版）和 `demo-3-animation.html`（有动画版）
|
||||
|
||||
**教学资源：**
|
||||
- 教师准备：`demo-3-animation.html` 在本机调试好，各按钮动画流畅可用
|
||||
- 教师准备：「动画增量需求」保底提示词（见第5节）、「音效合成」保底提示词（见第5节）
|
||||
- 教师准备：Web Audio 三行代码片段（在 Kimi 里提前验证过能正常合成音效）
|
||||
- 学生资源：上节课（第9课）完成的战斗游戏 `index.html`，血条/行动/胜负判定已可用
|
||||
|
||||
**教师备课体验任务：**
|
||||
> 备课前，教师必须亲自完成以下操作：
|
||||
>
|
||||
> 1. 打开 `demo-2-pk-battle.html`，实际点一遍「普通攻击、重击、格挡、特技」四个按钮，感受没有动画时的体验——记录「哪里感觉很空洞」
|
||||
> 2. 打开 `demo-3-animation.html`，同样点一遍四种行动，对比感受差距——这是课堂对比演示的素材
|
||||
> 3. 用「动画增量需求」保底提示词向 Kimi 提交一次，拿到动画代码片段，在自己的测试文件里跑通——记录可能遇到的报错
|
||||
> 4. 写一段 Web Audio 代码合成「攻击音效」，在浏览器里验证能正常播放（注意 Chrome 需要用户交互后才能触发音频）
|
||||
> 5. 确认学生电脑音量未被静音，Web Audio 可正常发声
|
||||
|
||||
---
|
||||
|
||||
### 4. 教学流程
|
||||
|
||||
---
|
||||
|
||||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||||
|
||||
*本幕目标：通过无动画 vs 有动画的真实对比，让学生切身感受「游戏感」的差距，建立「视觉反馈是游戏的灵魂」的直觉*
|
||||
|
||||
**【环节】上节课回顾 (2分钟)**
|
||||
|
||||
**师：** 上节课我们做了什么？谁来说一下我们的战斗系统现在能做什么？
|
||||
|
||||
**生：**（预期：有血条、可以攻击、有胜负、有特技）
|
||||
|
||||
**师：** 对，上节课我们还跑了测试脚本，伤害公式和胜负判定都验证通过了。今天我问你们——你们觉得现在这个游戏，好玩吗？好看吗？
|
||||
|
||||
**生：**（预期：还行 / 感觉有点无聊 / 就是点按钮数字变化）
|
||||
|
||||
**师：** 嗯。现在先别回答，我让你们看两个版本——看完再说。
|
||||
|
||||
**【环节】对比演示——无动画 vs 有动画 (8分钟)**
|
||||
|
||||
【投屏展示 demo-2-pk-battle.html，教师操作】
|
||||
|
||||
**师：** 这是我们现在的版本。我点一下「普通攻击」——
|
||||
|
||||
【点击普通攻击，血条数字变化，但角色没有任何动作】
|
||||
|
||||
**师：** 发生了什么？
|
||||
|
||||
**生：**（预期：血量少了 / 没什么感觉 / 就是数字变了）
|
||||
|
||||
**师：** 对，血条从 100 变成了 85。游戏逻辑是对的。那感觉呢？
|
||||
|
||||
**生：**（预期：感觉很平淡 / 不知道攻击有没有打出去 / 没什么反应）
|
||||
|
||||
**师：** 好，这个感受记住。现在看第二个版本。
|
||||
|
||||
【切换投屏到 demo-3-animation.html】
|
||||
|
||||
**师：** 同样的游戏，我点「普通攻击」——
|
||||
|
||||
【点击普通攻击，角色冲刺向对方，对方受击抖动，音效响起】
|
||||
|
||||
**师：** 现在感觉怎么样？
|
||||
|
||||
**生：**（预期：爽多了！/ 有打击感 / 感觉真的在打架）
|
||||
|
||||
【继续演示重击：角色蓄力放大→猛冲，屏幕震动】
|
||||
【演示格挡：角色后退，护盾闪烁】
|
||||
【演示特技：粒子效果爆发】
|
||||
|
||||
**师：** 这两个游戏，逻辑是完全一样的。血条、伤害、胜负——一模一样。唯一的区别是什么？
|
||||
【诊断点：学生是否能说出「动画」「视觉反馈」「音效」等关键词】【识别层】
|
||||
|
||||
**【分支A】若学生说出「动画」「特效」「声音」：**
|
||||
**师：** 对！动画、音效、视觉反馈。这些加在一起，有一个专门的词——叫做「游戏感（Game Feel）」。什么叫游戏感？就是每次你操作，都有看得见、听得到的反馈——你的动作「生效了」。没有游戏感的游戏，就算逻辑完美，玩起来也像在操作表格。
|
||||
|
||||
**【分支B】若学生说「好看多了但说不出为什么」：**
|
||||
**师：** 你说好看多了，我问你——当你点普通攻击的时候，第一个版本你看到了什么？
|
||||
**生：**（预期：数字变了）
|
||||
**师：** 第二个版本呢？
|
||||
**生：**（预期：角色冲过去了、对方抖了）
|
||||
**师：** 对。第一个版本你的操作「发生了」但你看不到。第二个版本你的操作「生效了」，你看得到、感受得到。这种「每次操作都有反馈」的体验，叫「游戏感」。今天我们的任务就是把游戏感加到你们的战斗系统里。
|
||||
|
||||
**师：** 今天三件事：第一，给每种行动加动画；第二，加上音效；第三，让特技有独特的视觉标记。加完之后，你的战斗游戏就「活了」——可以参加下节课的班级对战了。
|
||||
|
||||
---
|
||||
|
||||
**第二幕：建构 (Construct) — 65分钟** 🛠️
|
||||
|
||||
---
|
||||
|
||||
**【分段一：动画系统——用感觉描述需求】(20分钟)**
|
||||
|
||||
*本段重点：学会用「感觉语言」而不是技术参数来描述动画；学会写增量需求（只写新增的动画部分，不重写已有战斗逻辑）*
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念 M3：增量需求要把整个需求文档重写一遍
|
||||
- 误概念 M4：动画描述必须用技术参数（duration: 200ms）
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 我们要给战斗系统加动画。但加动画不是从头重写游戏——我们用「增量需求」的方式，只告诉 AI 「新加什么」，已有的代码不动。
|
||||
|
||||
**师：** 有人知道为什么不能重写吗？
|
||||
|
||||
**生：**（预期：不知道 / 会改坏 / 太麻烦）
|
||||
|
||||
**师：** 你上节课的战斗逻辑，血条、伤害、胜负——都测试通过了，是吧？如果我现在把整个需求文档重写一遍提交给 AI，AI 很可能会「重新理解」你的战斗逻辑，把你已经调好的伤害公式改掉，或者把你的特技系统换一种方式实现。这叫「误改」。增量需求就是告诉 AI：「已有的代码已经验收通过，你只需要在这个基础上加动画，不要动其他东西。」
|
||||
|
||||
**师：** 就像你家装修完了，现在只想加一个书架——你不会让装修工人重新来一遍，你只说「加一个书架，其他不动」。
|
||||
|
||||
**师：** 然后——动画要怎么描述？我问你：你觉得「普通攻击」的感觉应该是什么样子的？
|
||||
|
||||
**生：**（预期：冲过去 / 快速冲向对方 / 用力打一下）
|
||||
|
||||
**师：** 好，「快速冲向对方」——再具体一点，冲过去之后呢？
|
||||
|
||||
**生：**（预期：然后回来 / 弹回来）
|
||||
|
||||
**师：** 对！「快速冲向对方，然后弹回来」——这就是动画描述。不需要说「x偏移100像素，duration 200ms，ease Power2」——你只需要说出感觉，AI 会把感觉翻译成参数。
|
||||
|
||||
【投屏展示对比】
|
||||
```
|
||||
❌ 技术参数描述：
|
||||
普通攻击：x += 100, duration: 200, ease: 'Power2', yoyo: true
|
||||
|
||||
✅ 感觉描述：
|
||||
普通攻击：攻击方快速冲向对方，然后弹回原位，感觉轻快有力
|
||||
```
|
||||
|
||||
**师：** 我们来做个小练习——每个人说出四种行动的感觉，不要用技术词汇，就说你脑子里的画面。
|
||||
|
||||
【投屏展示四种行动，每个留5秒空白让学生思考】
|
||||
|
||||
| 行动 | 你脑子里的画面是什么？ |
|
||||
|------|---------------------|
|
||||
| 普通攻击 | ？ |
|
||||
| 重击 | ？ |
|
||||
| 格挡 | ？ |
|
||||
| 受击 | ？ |
|
||||
|
||||
**师：** 说一下，「重击」你觉得是什么感觉？
|
||||
|
||||
**生：**（预期：很用力冲过去 / 先蓄力然后猛冲 / 会震动）
|
||||
|
||||
**师：** 「先蓄力然后猛冲」——太好了，这就是完美的感觉描述。AI 看到这个会知道要做两段动画：第一段蓄力（角色变大），第二段冲刺（快速位移）。
|
||||
|
||||
**学生实践 (Practice): (10分钟)**
|
||||
|
||||
在窗口 A 里，学生用感觉语言写出增量需求，提交给 Kimi，获取动画代码。
|
||||
|
||||
> 教师走动观察：谁停下来不动超过2分钟立刻过去，观察他们写的感觉描述是否太技术化（「角色向右移动100px」）还是真的在用感觉语言
|
||||
|
||||
**学生写增量需求的结构提示（投屏展示）：**
|
||||
```
|
||||
我已有一个用 HTML/JavaScript 写的战斗游戏，战斗逻辑已经验收通过。
|
||||
现在我要新增动画系统，只描述新增部分，请不要修改已有的战斗逻辑。
|
||||
|
||||
普通攻击动画：[你的感觉描述]
|
||||
重击动画：[你的感觉描述]
|
||||
格挡动画：[你的感觉描述]
|
||||
受击动画：[你的感觉描述]
|
||||
死亡动画：[你的感觉描述]
|
||||
```
|
||||
|
||||
**进度同步 (Checkpoint): (5分钟)**
|
||||
|
||||
**师：** 谁来分享一下你写的感觉描述？用感觉语言写的举手。
|
||||
【诊断点：检验学生是否真的用了感觉语言，而不是技术参数】【理解层】
|
||||
|
||||
**【分支A】若学生写出了好的感觉描述（「像被闪电劈中一样抖动」）：**
|
||||
**师：** 这个描述太棒了！我们来看 AI 怎么翻译——
|
||||
【投屏展示 Kimi 返回的参数，对应学生的感觉描述】
|
||||
**师：** 你说「像被闪电劈中一样抖动」，AI 翻译成了「x 方向快速来回震荡5次，每次10像素，总时长150毫秒」。感觉对吗？
|
||||
|
||||
**【分支B】若学生的描述还是偏技术（「角色向右移动」）：**
|
||||
**师：** 我来问你——你玩游戏里打人，那个「被打」的感觉是什么？能用一个词或一句话描述吗？
|
||||
**生：**（预期：抖了一下 / 像撞墙一样 / 闪了一下）
|
||||
**师：** 对，把这个感觉写进去，比说「向右移动」更准确——AI 更能理解你真正想要的效果。
|
||||
|
||||
**【分支C】若学生 AI 返回的动画代码与感觉不符：**
|
||||
**师：** 你看一下动画效果，跟你想的感觉一样吗？哪里不对？
|
||||
**生：**（预期：太慢了 / 感觉不够有力 / 角色跑的方向不对）
|
||||
**师：** 好，现在你就直接告诉 AI：「重击感觉不够震撼，蓄力时间太短了，冲刺速度也不够快，能不能把蓄力时间加长一倍，冲刺速度加快？」——这就是用感觉来迭代。
|
||||
|
||||
---
|
||||
|
||||
**【分段二：音效系统——描述声音感觉】(20分钟)**
|
||||
|
||||
*本段重点：用三行代码演示 Web Audio 合成原理；学会用「声音感觉」而不是技术参数描述音效需求；实现五种基础战斗音效*
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念 M2：音效需要找音频文件，太麻烦了
|
||||
- 误概念 M4（延伸）：描述音效也要用技术参数
|
||||
|
||||
**讲解与演示 (Teach & Demo): (5分钟)**
|
||||
|
||||
**师：** 现在我们加音效。有人觉得加音效很麻烦的举手——要找音频文件、下载、导入……
|
||||
|
||||
**生：**（预期：举手 / 点头）
|
||||
|
||||
**师：** 告诉你们一个秘密——我们不需要任何音频文件。我们用代码「生成」声音。
|
||||
|
||||
【投屏展示，教师打开浏览器控制台】
|
||||
|
||||
**师：** 这是 Web Audio API——浏览器内置的音频引擎。我现在在控制台里写三行代码，让浏览器发出一个「攻击音效」。
|
||||
|
||||
【现场演示，逐行输入并解释】
|
||||
|
||||
```javascript
|
||||
const ctx = new AudioContext();
|
||||
const osc = ctx.createOscillator();
|
||||
osc.frequency.value = 300; // 音调——300 是中等音高
|
||||
osc.type = 'sawtooth'; // 波形——锯齿波比较「粗糙有力」
|
||||
const gain = ctx.createGain();
|
||||
gain.gain.value = 0.3; // 音量
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start();
|
||||
setTimeout(() => osc.stop(), 80); // 只响 80 毫秒
|
||||
```
|
||||
|
||||
**师：** 听到了吗？这是攻击音效——短促有力，像轻击。全部代码就这几行，不需要任何文件。
|
||||
|
||||
**师：** 和动画一样，音效也用感觉来描述。我来问你——「重击」的声音是什么感觉？
|
||||
|
||||
**生：**（预期：低沉 / 爆炸感 / 震动 / 轰的一声）
|
||||
|
||||
**师：** 「低沉震撼，像爆炸」——这就是感觉描述。告诉 AI 这个感觉，AI 会帮你调频率、波形、时长。你不需要知道「锯齿波还是方波」——你只需要知道「你要什么感觉」。
|
||||
|
||||
【投屏展示感觉→参数对应表】
|
||||
|
||||
| 行动 | 声音感觉（你来填） | AI 可能翻译成 |
|
||||
|------|----------------|-------------|
|
||||
| 普通攻击 | 短促有力，像轻拍 | 频率300Hz，锯齿波，80ms |
|
||||
| 重击 | 低沉震撼，像爆炸 | 频率150Hz，锯齿波，150ms |
|
||||
| 格挡 | 硬邦邦，像金属碰撞 | 频率800Hz，方波，50ms |
|
||||
| 受击 | 痛感，短促的「嗷」 | 频率400→150Hz扫频，120ms |
|
||||
| 胜利 | 欢快，像叮当 | 三音符523→659→784Hz，正弦波 |
|
||||
|
||||
**学生实践 (Practice): (10分钟)**
|
||||
|
||||
学生打开窗口 B（独立于战斗游戏），用感觉描述让 Kimi 生成五种音效代码。验证每种音效能正常播放后，再把音效函数添加进战斗游戏的对应行动里。
|
||||
|
||||
> 教师走动观察重点：
|
||||
> 1. 学生在描述音效时是否用了感觉语言还是乱写参数
|
||||
> 2. 音效代码添加进战斗游戏后，有没有整合进「行动触发」时机（不能只是独立的函数，要在攻击时自动调用）
|
||||
|
||||
**进度同步 (Checkpoint): (5分钟)**
|
||||
|
||||
**师：** 谁来演示一下？点一个行动，我们听听音效。
|
||||
【让1-2位学生上来演示战斗，播放音效】
|
||||
【诊断点：音效是否在正确的时机触发（点攻击时响，而不是游戏开始时就响）】【应用层】
|
||||
|
||||
**【分支A】若音效在正确时机触发且效果合理：**
|
||||
**师：** 注意听——每次点攻击有没有声音？每种行动的声音有没有区别？
|
||||
【让全班听对比，引导学生注意重击和普通攻击的音效差异】
|
||||
**师：** 好，把这个感觉记住——有音效和没音效，游戏感差距很大。
|
||||
|
||||
**【分支B】若音效能响但时机不对（比如每隔一秒自动响）：**
|
||||
**师：** 音效响了，但是时机有点问题——应该是点攻击时响，而不是自动响。你的音效函数是在哪里被调用的？
|
||||
**生：**（查代码）……好像放到外面了？
|
||||
**师：** 对，你需要把 `playSound_attack()` 这个函数的调用，放进你处理「普通攻击」按钮点击的那个函数里——告诉 AI：「请把音效调用放在行动触发时，不要自动播放」。
|
||||
|
||||
**【分支C】若音效完全没有声音（Chrome 浏览器 AudioContext 未激活）：**
|
||||
**师：** 先检查电脑音量，再检查——在 Chrome 里，必须是用户点击页面之后，音频才能播放。你有没有先点一下游戏页面，再点攻击按钮？
|
||||
【引导学生先点一下页面，激活 AudioContext，然后再试】
|
||||
|
||||
---
|
||||
|
||||
**【分段三：特技视觉效果完善 + 平衡性调整】(15分钟)**
|
||||
|
||||
*本段重点：给每个特技加上独特的视觉标记（粒子/颜色/光效），让玩家能感知特技「生效了」；同时微调特技触发概率让对战更平衡*
|
||||
|
||||
**预设误概念：**
|
||||
- 误概念 M5：特技效果只要触发就行，不需要视觉区分
|
||||
|
||||
**讲解与演示 (Teach & Demo): (4分钟)**
|
||||
|
||||
**师：** 最后一段——特技。你们的特技现在已经有效果了，对吧？但我问你——燃烧特技触发了，你怎么知道它触发了？
|
||||
|
||||
**生：**（预期：有文字提示 / 看日志 / 对方血量变化快）
|
||||
|
||||
**师：** 靠文字提示来告诉玩家「特技触发了」——这叫什么？这叫「说给玩家听」。而好的游戏是「让玩家感受到」。
|
||||
|
||||
**师：** 每个特技必须有专属的视觉标记——就像每种英雄技能有自己的颜色。我来给你们看几个方向：
|
||||
|
||||
【投屏展示特技视觉效果参考】
|
||||
|
||||
```
|
||||
🔥 燃烧：目标角色持续冒出橙红色小粒子，向上飘散
|
||||
🛡 护甲：角色周围出现蓝色光圈，护盾吸收伤害时闪烁
|
||||
⚡ 连击：第二次攻击时黄色闪光从角色身上爆发
|
||||
💉 吸血：攻击时绿色光线从对方身上流向自己
|
||||
❄️ 冰冻：对方角色整体变蓝（tint 0x4444ff），出现碎冰粒子
|
||||
🎯 穿透：攻击线变红色，穿过对方护盾
|
||||
```
|
||||
|
||||
**师：** 你的游戏里有哪种特技？现在打开需求文档，给你的特技加一条「视觉效果描述」——用感觉语言，告诉 AI 特技触发时玩家应该「看到什么」。
|
||||
|
||||
**学生实践 (Practice): (8分钟)**
|
||||
|
||||
学生在窗口 A（增量需求）里补充特技视觉效果描述，提交给 Kimi 生成代码；同时，根据上节课测试结果，检查特技触发概率是否合理（可调整概率，让对战更有趣），把最终版战斗游戏跑通。
|
||||
|
||||
> 教师走动重点：检查学生的特技视觉效果是否真的有视觉差异，而不是所有特技都做成「同一种颜色的粒子」
|
||||
|
||||
**进度同步 (Checkpoint): (3分钟)**
|
||||
|
||||
**师：** 好，现在所有人试玩一下自己的战斗游戏——从开始到有人胜利，完整走一遍。有动画、有音效、有特技视觉效果的请举手。
|
||||
【诊断点：完整游戏循环（动画+音效+特技视觉）是否全部正常运行】【应用层】
|
||||
|
||||
**【分支A】若学生完整游戏循环正常：**
|
||||
**师：** 很好，你的涂鸦PK已经有游戏感了。下节课的班级对战，就用这个版本。给自己鼓个掌。
|
||||
|
||||
**【分支B】若学生动画有但音效没有（或相反）：**
|
||||
**师：** 没关系，少一项我们继续加。现在缺的是哪一个？告诉我——动画、音效、特技视觉，哪个没做完？
|
||||
【针对性引导完成缺失的部分，优先保证动画完整，音效可以只有三种基础音效也算通过】
|
||||
|
||||
**【分支C】若学生整个游戏运行出错：**
|
||||
**师：** 现在打开浏览器的控制台（F12），看一下有没有红色的报错信息，把报错信息截图或者复制下来，告诉 AI「我在运行时遇到了这个报错，请帮我定位问题」——这是你们最后一次用 AI 调试，我们在课堂上解决。
|
||||
|
||||
---
|
||||
|
||||
**第三幕：反思 (Contemplate) — 10分钟** 🤔
|
||||
|
||||
**【环节】成果展示 (6分钟)**
|
||||
|
||||
**师：** 好，时间到。谁愿意来展示一下今天的战斗游戏？要展示三件事：第一，你的角色是谁；第二，你加了什么样的动画；第三，你设计了什么特技的视觉效果。
|
||||
|
||||
【邀请 2-3 名学生展示，每人 1.5 分钟】
|
||||
|
||||
**师：** 展示的时候，先说你「用感觉描述了什么」，再演示效果——让大家看你的感觉描述和 AI 翻译出来的代码，差距有多大。
|
||||
|
||||
【第一位学生展示】
|
||||
|
||||
**师：** 你说「重击感觉像被大锤砸到」，AI 做出来的效果，符合你的感觉吗？
|
||||
|
||||
**生：**（预期：基本符合 / 比我想的还要好 / 有一点不对但我改了）
|
||||
|
||||
**师：** 好——改了几次才满意？
|
||||
|
||||
**生：**（预期：两三次）
|
||||
|
||||
**师：** 两三次迭代就做到满意——这就是「用感觉描述 + 迭代优化」的效率。
|
||||
|
||||
**【环节】互评与讨论 (4分钟)**
|
||||
|
||||
**师：** 谁来给刚才展示的游戏说「一个优点 + 一个改进建议」？要具体说，不能只说「很好看」。
|
||||
|
||||
**生：**（预期：动画很流畅，但是音效重击的声音感觉不够震撼）
|
||||
|
||||
**师：** 好，「不够震撼」——怎么改？
|
||||
|
||||
**生：**（预期：声音低一点 / 时间长一点 / 加个爆炸效果）
|
||||
|
||||
**师：** 对，这就是具体的改进建议。今天我们训练的核心能力是什么？
|
||||
|
||||
**生：**（预期：动画 / 音效 / 特效）
|
||||
|
||||
**师：** 这些都是工具。背后的能力是——**审美力**：用感觉描述「好不好看、好不好听」，让 AI 把你的感觉变成代码。审美力不是说「画画好看」，是说「你能不能清楚地描述一个体验，并且判断 AI 做出来的是不是你要的」。
|
||||
|
||||
---
|
||||
|
||||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||||
|
||||
**【环节】抽象总结 (3分钟)**
|
||||
|
||||
**师：** 今天三件事，我们来总结一下。第一件是什么？
|
||||
|
||||
**生：**（预期：动画 / 加了动画）
|
||||
|
||||
**师：** 对，我们加了动画。背后的方法是什么？
|
||||
|
||||
**生：**（预期：用感觉描述 / 感觉语言）
|
||||
|
||||
**师：** 对——「用感觉描述需求」。不用技术参数，直接说你脑子里的画面，AI 来翻译。这个能力不只能用在游戏开发里——你想做一个网页、一个动效、一个演示文稿，都可以这样描述：「我想要一种……的感觉」，AI 来实现。
|
||||
|
||||
**师：** 第二件事，音效。背后的发现是什么？
|
||||
|
||||
**生：**（预期：不需要音频文件 / 代码可以直接合成声音）
|
||||
|
||||
**师：** 对——Web Audio API 用代码合成声音。零文件，浏览器内置。这说明一件事：很多你以为「需要素材」的东西，代码都可以直接生成。
|
||||
|
||||
**师：** 第三件事，特技视觉效果。核心原则是什么？
|
||||
|
||||
**生：**（预期：要让玩家看得见 / 每种特技要有独特的效果）
|
||||
|
||||
**师：** 对——「让玩家感受到，而不是告诉玩家」。这是所有好游戏的共同原则。
|
||||
|
||||
**【环节】下节预告 + 5分钟挑战 (2分钟)**
|
||||
|
||||
**师：** 下节课——班级大乱斗。你们的战斗游戏会互相对战，不同角色、不同特技。在对战之前，你有机会再调整一次你的特技参数——如果你觉得你的角色太弱，可以偷偷增强一点……
|
||||
|
||||
**生：**（预期：笑声 / 期待）
|
||||
|
||||
**师：** ……但是太强了也不行，因为我会检查公平性。
|
||||
|
||||
**师：** 本周的5分钟挑战：给你的一个特技，加一个你自己设计的视觉特效——不用上课说的那些，完全自己想。描述感觉，让 AI 实现，下节课展示。
|
||||
|
||||
---
|
||||
|
||||
### 5. AI助教使用指南
|
||||
|
||||
**教师演示用提示词（动画增量需求）：**
|
||||
```
|
||||
我已有一个用 HTML + JavaScript 写的战斗游戏，代码在下面。
|
||||
战斗逻辑（血条、行动、伤害、胜负判定）已经验收通过，请不要修改。
|
||||
|
||||
现在我要新增动画系统，只描述新增的动画部分：
|
||||
- 普通攻击：攻击方快速冲向对方100像素然后弹回来，感觉轻快有力
|
||||
- 重击：攻击方先膨胀变大（1.2倍，蓄力感），然后猛冲向对方150像素，对方水平抖动3次
|
||||
- 格挡：格挡方向后退50像素，同时闪烁两次（半透明/不透明切换，护盾感）
|
||||
- 受击：被击方左右快速抖动（±10像素，3次），同时变红后恢复原色
|
||||
- 死亡：旋转360度同时缩小到0并淡出，600毫秒内完成
|
||||
- 胜利：上下弹跳3次（-30像素/次，200毫秒/次）
|
||||
|
||||
请只输出新增的动画相关代码，以及在哪里插入。不要改动现有代码结构。
|
||||
```
|
||||
|
||||
**教师演示用提示词（音效合成，窗口 B）：**
|
||||
```
|
||||
我要用 Web Audio API 合成战斗游戏音效，全部在 HTML 里实现，不需要任何音频文件。
|
||||
|
||||
请帮我写以下音效函数（每个独立的 function），音效感觉描述如下：
|
||||
1. playSound_attack()：短促有力，像轻击金属，80毫秒
|
||||
2. playSound_heavy()：低沉震撼，像远处爆炸，有一点回响感，150毫秒
|
||||
3. playSound_block()：清脆硬邦邦，像剑挡住了另一把剑，50毫秒
|
||||
4. playSound_hit()：短促的痛感，像「嗷」一声，120毫秒
|
||||
5. playSound_win()：欢快的三音符上升，像「叮叮叮」，音调一个比一个高
|
||||
|
||||
每个函数调用时直接播放，不需要预加载。请输出可以直接放进 HTML 的完整代码片段。
|
||||
```
|
||||
|
||||
**学生保底提示词（动画增量需求，窗口 A）：**
|
||||
```
|
||||
我已有一个用 HTML/JavaScript 写的战斗游戏（代码如下）。
|
||||
战斗逻辑已验收，请不要修改已有代码。
|
||||
|
||||
在此基础上新增动画：
|
||||
- 普通攻击：角色冲出去然后弹回
|
||||
- 重击：先蓄力放大再猛冲，对方抖动
|
||||
- 格挡：角色后退并闪烁
|
||||
- 受击：角色抖动并变红
|
||||
- 死亡：旋转消失
|
||||
|
||||
请只添加动画相关代码，告诉我在哪里插入。
|
||||
```
|
||||
|
||||
**学生保底提示词（音效合成，窗口 B）：**
|
||||
```
|
||||
请帮我用 Web Audio API 合成以下游戏音效，写成 HTML 代码片段，每个音效一个函数：
|
||||
1. 普通攻击：短促有力的金属碰撞声
|
||||
2. 重击：低沉震撼的爆炸声
|
||||
3. 格挡：清脆的金属阻挡声
|
||||
4. 受击：短促的痛苦音
|
||||
5. 胜利：三音符上升的欢快音
|
||||
|
||||
函数名分别为 playSound_attack、playSound_heavy、playSound_block、playSound_hit、playSound_win。
|
||||
调用时直接播放，不需要任何音频文件。
|
||||
```
|
||||
|
||||
**进阶提示词（特技粒子效果）：**
|
||||
```
|
||||
我的战斗游戏有一个「燃烧」特技，触发时目标会持续受到灼烧伤害。
|
||||
请帮我用 Canvas 2D API（不用任何外部库）实现：
|
||||
- 燃烧状态下，目标角色周围持续出现橙红色小粒子
|
||||
- 粒子从角色身体向上飘散，透明度随时间降低到0后消失
|
||||
- 燃烧持续3秒，期间粒子效果一直在
|
||||
请只给我新增的粒子系统代码，以及调用时机说明。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 教师指南
|
||||
|
||||
**本课技术备注：**
|
||||
|
||||
**关于 Canvas 动画实现方式（不用 Phaser 的情况下）：**
|
||||
本课的战斗游戏基于 HTML Canvas 2D 直接绘制（无 Phaser），动画通过 `requestAnimationFrame` 循环和时间差（deltaTime）驱动。动画「缓动感」来自 lerp（线性插值）：每帧把当前位置向目标位置靠近一小步，产生「减速停下」的感觉。AI 生成的代码通常会用 `let t = 0; t += deltaTime / duration` 的方式控制进度，0到1之间变化，再套上缓动函数（如 `1 - (1-t)^3`）产生弹性效果。
|
||||
|
||||
**关于 Web Audio API 的自动播放限制：**
|
||||
Chrome/Edge 要求页面必须有用户交互（点击/键盘输入）后，才允许 `AudioContext` 播放声音。如果游戏一打开就尝试播放，会被浏览器拦截（报错：`AudioContext was not allowed to start`）。解决方案：把第一个 `AudioContext` 的创建放在用户点击按钮之后，或者用 `ctx.resume()` 在点击时激活。AI 生成的代码不一定会处理这个问题，需要教师在课堂提醒。
|
||||
|
||||
**关于增量需求的上下文传递：**
|
||||
让学生在「增量需求提示词」里把整个现有代码粘贴进去，Kimi 才能根据现有代码结构插入新代码。如果不提供现有代码，Kimi 会自己猜代码结构，生成的插入位置可能不对。提醒学生：「把你的战斗游戏代码全选复制，粘贴到提示词末尾」。
|
||||
|
||||
**关于特技粒子效果的性能：**
|
||||
粒子效果如果每帧创建大量 DOM 元素，会导致游戏卡顿。告诉学生用 Canvas 绘制粒子（在 `requestAnimationFrame` 里画圆点），不要让 AI 创建 `<div>` 元素来做粒子。如果学生的游戏明显卡顿，检查是否有粒子数组无限增长的问题（每帧加粒子但不清除），引导学生告诉 AI「粒子消失后从数组里删除」。
|
||||
|
||||
**常见问题 FAQ：**
|
||||
|
||||
| 问题 | 应对 |
|
||||
|------|------|
|
||||
| 「动画代码加进去之后，血条不显示了」 | 很可能是 Canvas `clearRect` 的调用顺序被改了，告诉 AI：「加了动画代码后血条不显示，请检查 clearRect 和绘制顺序是否被修改」 |
|
||||
| 「音效能响但是每次攻击响很多次」 | `playSound_attack` 函数被错误地放在了 `requestAnimationFrame` 里，每帧都在调用；告诉 AI「音效每次行动只应该播放一次」 |
|
||||
| 「死亡动画结束后角色还留在屏幕上」 | 死亡动画只改了透明度，没有在动画结束后将角色标记为「已死亡」并停止绘制；引导学生告诉 AI「动画结束后停止绘制该角色」 |
|
||||
| 「特技粒子效果触发一次后就一直在了」 | 粒子系统的「存活时间」逻辑没有实现，粒子永远不消失；告诉 AI「每个粒子有3秒存活时间，时间到了就从数组里移除」 |
|
||||
| 「我的重击蓄力动画太慢了游戏变拖沓」 | 这是审美判断问题，直接让学生告诉 AI：「蓄力时间改成 150ms，冲刺时间改成 80ms，感觉更爽快」 |
|
||||
| 「Chrome 没有声音」 | 先确认系统音量；再确认是否先点击了游戏页面；最后检查 `AudioContext` 是否在按钮点击后创建 |
|
||||
|
||||
**课堂风险预案：**
|
||||
- **如果 Kimi 返回的代码加进去运行报错：** 让学生把报错信息复制给 Kimi，提示词格式：「我按你说的把代码加进去了，运行时出现了这个报错：[报错信息]，原来的代码是 [原代码]，请帮我找到原因并给出修正后的代码」
|
||||
- **如果学生进度差异过大（有人全部做完有人还没做动画）：** 做完的学生进入拓展任务（给特技加粒子效果 + 调平衡性）；做到一半的学生优先完成动画，音效用保底提示词一步到位
|
||||
- **如果整体时间不够（25分钟建构还剩两段没做完）：** 合并分段二和分段三，音效只做三种基础音效（攻击/受击/胜利），特技视觉效果作为课后挑战
|
||||
|
||||
---
|
||||
|
||||
### 7. 5分钟日常AI挑战
|
||||
|
||||
**本周挑战：** 给你的一个特技，设计一个全新的视觉特效
|
||||
|
||||
**挑战说明：**
|
||||
选你游戏里你最喜欢的一个特技，想象它触发时应该「看起来像什么」——可以是粒子爆炸、颜色变化、屏幕震动、时间静止特效……只要用感觉语言描述出来，告诉 AI 实现。要求：这个特效必须和课上做的不一样，完全是你自己的设计。
|
||||
|
||||
**下节课分享：** 下周课上选 2-3 位同学展示特技特效挑战成果，说明自己是怎么描述感觉的，AI 实现了几轮才满意。
|
||||
|
||||
---
|
||||
|
||||
### 8. 拓展任务
|
||||
|
||||
**拓展一（推荐）：屏幕震动特效**
|
||||
重击时，不只是角色抖动——整个游戏画布轻微震动一下（Canvas 偏移 ±5 像素，持续 200ms）。这种效果叫「屏幕震动（Screen Shake）」，是格斗游戏的经典手法。用感觉描述让 AI 实现：「重击时整个画面抖一下，像相机被猛地推了一把」。
|
||||
|
||||
**拓展二（挑战）：行动预判音效**
|
||||
在角色攻击「蓄力」阶段播放一个低频「嗡——」的充能音效，攻击命中时再播放冲击音效——两段音效组合，制造出「蓄力→爆发」的完整听觉体验。提示：需要两个 Web Audio 函数，第一个在蓄力开始时调用，第二个在命中时调用，注意时机控制。
|
||||
|
||||
---
|
||||
|
||||
### 附：本课核心教学框架速查
|
||||
|
||||
**四幕时间分配（合计 90 分钟）：**
|
||||
|
||||
| 幕 | 内容 | 时长 |
|
||||
|----|------|------|
|
||||
| 联系 Connect | 对比演示无动画 vs 有动画，引出「游戏感」 | 10 分钟 |
|
||||
| 建构 · 分段一 | 感觉语言描述动画，写增量需求 | 20 分钟 |
|
||||
| 建构 · 分段二 | 用代码合成音效，整合进战斗行动 | 20 分钟 |
|
||||
| 建构 · 分段三 | 特技视觉标记完善 + 平衡性微调 | 15 分钟 |
|
||||
| 反思 Contemplate | 成果展示 + 感觉描述回顾 + 互评 | 10 分钟 |
|
||||
| 延续 Continue | 抽象总结三件事 + 预告班级对战 + 挑战发布 | 5 分钟 |
|
||||
|
||||
**本课核心能力训练路径：**
|
||||
|
||||
```
|
||||
审美力路径：
|
||||
无动画体验（识别层）
|
||||
→ 用感觉描述动画/音效需求（理解层）
|
||||
→ 对比 AI 输出和自己预期，定位差距（应用层）
|
||||
→ 精准迭代修改，达到满意（迁移层）
|
||||
|
||||
提问力路径：
|
||||
理解增量需求的必要性（识别层）
|
||||
→ 只写新增部分的提示词，不重写全局（理解层）
|
||||
→ 在已有代码基础上定向追加功能（应用层）
|
||||
```
|
||||
|
||||
**关键词速查（下课前可口头检查学生是否能解释）：**
|
||||
- 游戏感（Game Feel）：每次操作都有视觉/听觉反馈，让玩家感受到行动生效
|
||||
- 增量需求：在已验收代码基础上只描述新增部分，避免 AI 误改
|
||||
- Web Audio API：浏览器内置音频引擎，用代码合成声音，无需音频文件
|
||||
- 感觉语言：用描述体验和画面感的词汇提需求，而非技术参数
|
||||
Reference in New Issue
Block a user