AICODE2026/3-lessons/AICODE-06/AICODE06-10 涂鸦PK（三）— 动画 + 音效 + 特技.md

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线

课时	主题	核心能力	核心工具	时长	透明化层级	适用路线
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——浏览器内置的音频引擎。我现在在控制台里写三行代码，让浏览器发出一个「攻击音效」。

【现场演示，逐行输入并解释】

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：浏览器内置音频引擎，用代码合成声音，无需音频文件
• 感觉语言：用描述体验和画面感的词汇提需求，而非技术参数