ClassFeedback/.claude/lesson/AI03/AICODE-06/AICODE06-08 涂鸦PK（一）— 画图工具 + 角色设计.md

---
课时: 8
主题: 涂鸦PK（一）— 画图工具 + 角色设计
核心能力: [拆解力, 审美力]
核心工具: [Trae IDE, Kimi]
时长: 90分钟
透明化层级: 过程层
适用路线: AICODE-06
---

### 1. 课程目标

**知识目标：**
- 理解「精准需求 > 冗余需求」：需求文档的价值在于可测试性，不在于篇幅长短
- 理解「新窗口审核」的本质：不同上下文的 AI 才能发现你看不见的漏洞
- 理解角色属性是「打法定位」的策略设计，不是随意填写的数字

**能力目标：**
- 能用 Plan Mode 三步（窗口A整理→窗口B审核→窗口C执行）完成画图工具的需求文档（拆解力）
- 能用自己生成的画图工具画出两帧角色（帧1待机 + 帧2攻击），差异度清晰可见（审美力）
- 能根据20分预算制，选定自己的打法定位，合理分配属性点（拆解力）

**情感目标：**
- 建立「工具是自己做的」的自豪感——不是用别人的软件，而是先造工具再用工具
- 发现「像素画」的审美乐趣：小小的64×64格子里也能表达角色个性
- 体验「打法定位」带来的策略感：我的角色是有设计意图的，不是随便画的

---

### 2. 核心概念与误概念预设

**核心概念认知层级：**

| 概念 | 学生类比 | 认知层级 |
|------|---------|---------|
| Spritesheet（精灵图集） | 动画书里的一页纸上排了多幅连续图，快速翻动就成了动画；Spritesheet 就是把所有帧拼成一张图，程序按顺序裁取每一帧 | 识别层 |
| 帧（Frame） | 动画里每一张静止的画面；两帧之间的差异越大，动画的动感越强 | 识别层 |
| 属性预算制 | 创建角色时只有20个技能点，花在HP多了ATK就少——这就是策略，不是加法题 | 理解层 |
| 需求可测试性 | 「字要好看」不可测试；「字体大小16px、颜色白色」可以测试。只有写得出来测试步骤的需求，才是写清楚了的需求 | 应用层 |
| 打法定位 | 篮球队里有中锋/控卫/得分手，分工不同；坦克型靠血厚扛伤害，刺客型靠高攻一击必杀——每种打法都有对应的属性分配 | 应用层 |

**典型误概念表：**

| 编号 | 误概念 | 正确认知 | 激发策略 |
|------|--------|---------|---------|
| M1 | 需求写得越多越好，越详细越安全 | 冗余需求会制造更多歧义和 bug；精准的需求才是关键——每条需求都要能写出测试步骤 | 展示一份100行需求文档生成的混乱代码 vs 精准15行需求生成的干净代码；问「这条需求，你怎么测试它对不对？」 |
| M2 | 让 AI 直接写代码更快，需求文档浪费时间 | 没有需求文档，验收时你不知道从哪里查；出了 bug 无法溯源，只能靠直觉瞎改 | 问：「如果 AI 做出来画布不是64×64，你怎么知道是哪条需求没说清楚？」 |
| M3 | 需求审核就是自己再读一遍 | 新窗口审核：上下文不同的 AI 能发现你看不见的漏洞；自己审等于让同一个人既出题又判卷 | 演示：把需求文档发给同一窗口的 AI，它说「没问题」；发给新窗口，它提了3个你没想到的问题 |
| M4 | 两帧画一样就行，动画不重要 | 帧1待机姿势 + 帧2攻击姿势，差异越大动画越有冲击力；帧2完全复制帧1等于没有动画 | 打开 demo-3-animation：展示两帧相同 vs 帧2明显前冲的动画对比，让学生自己感受差距 |
| M5 | 属性随便填，反正都是数字 | 属性是角色的「打法定位」，这是策略设计，不是填表格；20分预算是有限资源，怎么分配决定了这个角色的战斗风格 | 类比：篮球队里有中锋/控卫/得分手，不是每个人都练同一个技能；问「你是想先手打爆对方，还是慢慢耗死对方？」 |

---

### 3. 教学准备

**工具与环境：**
- 每台电脑已登录 Kimi（网页版），网络正常
- 每台电脑装有 Trae IDE，可以创建 HTML 文件并用浏览器预览
- 教师电脑准备好 demo-pk 目录下的两个 demo 文件：
  - `demo-1-draw-tool.html`（完整画图工具，备用展示）
  - `demo-3-animation.html`（角色动画展示，Connect 环节使用）

**教学资源：**
- 教师准备：打开 `demo-3-animation.html`，导入一个提前画好的临时涂鸦角色 Spritesheet，用于 Connect 导入
- 教师准备：「画图工具需求文档模板」文字版（见第5节，投屏展示）
- 教师准备：一份「属性分配表」展示四种打法定位（见第5节）
- 学生资源：上节课完成的俄罗斯方块作品（精神延续，不需要文件）

**教师备课体验任务：**
> 备课前，教师必须亲自完成以下操作：
>
> 1. 走完完整的 Plan Mode 三步：用窗口A整理画图工具需求文档 → 窗口B审核（记录 AI 问了哪些你没想到的问题）→ 窗口C生成画图工具
> 2. 用生成的画图工具画一个角色（帧1待机 + 帧2攻击），感受64×64像素格子的限制和乐趣
> 3. 故意画一个「两帧完全相同」的角色，导出预览，体验「没有动画感」的效果——备用作为 M4 反例
> 4. 验证 `demo-3-animation.html` 的导入功能是否正常，准备一张 128×64 的 Spritesheet PNG

---

### 4. 教学流程

---

**第一幕：联系 (Connect) — 10分钟** 🔗

*本幕目标：用上周挑战回顾激活工程思维记忆；用 demo-3-animation 的动画展示制造「哇！」的感受，建立今天的项目目标*

**【环节】上节课挑战回顾 (3分钟)**

**师：** 上节课我布置了一个5分钟挑战——给测试脚本补一条没有被覆盖的规则。谁补了？补了什么？

**生：** （预期 A：我补了一条，测试「方块碰到左边界不能出去」）

**师：** 具体怎么补的？你是发现了哪条规则测试脚本没写？

**生：** （预期：测试脚本里没有检查边界，我就加了一个模拟按键到最左边的测试）

**师：** 很好——你不只是「加了一条」，你先发现了漏洞，再去补。这就是工程师的思维方式：不是随便加，而是找到没覆盖的地方补上去。

【诊断点：学生能否清晰描述「我发现了什么漏洞 → 我用什么方法补上去了」，而不只是「我加了一条测试」】【理解层】

**【分支A】若学生能说出具体的漏洞和补法：**
**师：** 这条补得很到位。以后做任何项目，验收脚本里「没写到的地方」就是最容易漏 bug 的地方。

**【分支B】若学生说「我没有补，不知道怎么补」：**
**师：** 没关系，今天我们马上会用到同样的思路——先写需求，需求就是验收的标准。你今天会自己搞清楚这个流程。

**【分支C】若没有学生做了挑战：**
**师：** 好，我来快速过一遍——测试脚本的核心作用是什么？

**生：** （预期：验证游戏规则有没有做对）

**师：** 对。「没被覆盖的规则」就是「测试脚本没想到的情况」。记住这个概念，今天会继续用到。

---

**【环节】情景导入 (7分钟)**

**师：** 上节课我们用 Plan Mode 完成了俄罗斯方块。今天我们开启一个全新项目——涂鸦PK。

**师：** 先不解释「PK」是什么，我先让你们看一个东西。

【投屏打开 demo-3-animation.html】

**师：** 这是一个角色动画展示器。你们看——这两个角色在做什么？

**生：** （预期：在动！/ 一个在走路，一个在打架）

**师：** 对，这是两帧动画——帧1是待机状态，帧2是攻击状态，快速交替播放就有了动感。但是这两个角色，是我临时画的，我花了大概5分钟。

**师：** 现在，我要把这个临时角色换成你们自己画的角色。

【教师演示导入提前准备的临时涂鸦 Spritesheet，动画播放起来】

**师：** 这个动画里的角色，是用一个 HTML 画图工具做的。这个画图工具——是我们今天自己写出来的。

**师：** 今天的任务，两件事：第一，用 Plan Mode 做出一个画图工具；第二，用这个工具画你自己的战斗角色——帧1待机，帧2攻击。

**师：** 上节课用的 Plan Mode 三步，还记得吗？

**生：** （预期：记得！窗口A整理需求，窗口B审核，窗口C执行）

**师：** 对，一模一样的流程。只是这次做的不是游戏，而是工具。先造工具，再用工具。

【诊断点：学生是否能自己说出 Plan Mode 三步，而不是被教师提示】【识别层】

---

**第二幕：建构 (Construct) — 65分钟** 🛠️

*本幕目标：完整走完 Plan Mode 三步生成画图工具；逐条验收画图功能；用生成的工具画出两帧角色并填写属性 JSON*

---

**【分段一：Plan Mode — 画图工具需求文档】(25分钟)**

*本段重点：引导学生从「我要做什么」出发，用窗口A整理需求文档，再用窗口B（新窗口审核工程师）发现漏洞，补充完整后准备提交*

**预设误概念：**
- 误概念 M1：需求写得越多越好，越长越安全
- 误概念 M2：直接让 AI 写代码更快，不需要文档
- 误概念 M3：需求审核就是自己再读一遍，不用开新窗口

**讲解与演示 (Teach & Demo): (8分钟)**

**师：** 开始 Plan Mode 第一步——整理需求。我们要做的画图工具有哪些功能？先不急着写，我们来想一想，这个工具要能做什么。

**师：** 用这个画图工具，最后要交出一张图。这张图有什么要求？

**生：** （预期：要是方块组成的 / 要有两帧 / 颜色要能选）

**师：** 我来把这些需求点梳理一下，一共6个部分。你们跟着我一起确认每个部分的内容，然后我们用 AI 整理成规范文档——

**师：** 第一部分——画布大小。我们用 64×64 像素，但显示的时候放大 8 倍显示，这样格子就有 512×512 的大小，不会太小看不清。

**师：** 第二部分——工具。需要三个：画笔（点击涂色）、橡皮（把像素变透明或白色）、填充桶（把一片同色区域一起换色）。

**师：** 第三部分——调色板。至少 16 种颜色，支持自定义颜色选择器。

**师：** 第四部分——多帧编辑。这是最关键的——我们有两帧，帧1是待机姿势，帧2是攻击姿势，可以切换编辑，而且可以把帧1复制到帧2作为修改起点。

**师：** 第五部分——动画预览。在工具里就能看到两帧切换的动画效果，不用每次都导出去看。

**师：** 第六部分——导出。生成一张 128×64 的 PNG 图片，两帧横向拼在一起，就是 Spritesheet。

**师：** 这 6 个部分，每一个都有一个关键问题：「怎么测试它做对了？」这叫需求可测试性。比如「画布 64×64 像素」——怎么测试？

**生：** （预期：在画布上画一条线，看有没有 64 格 / 在画布最边上点，看坐标是不是（63，63））

**师：** 对，能说出测试步骤，说明需求写清楚了。如果是「颜色要好看」——怎么测试「好看」？

**生：** （停顿）……好像测不了……

**师：** 对，「好看」不可测试。所以需求文档里不能出现「好看」「流畅」「方便」这类词。要写具体的、能测试的描述。
【理解层：建立「需求可测试性」的直觉，澄清 M1 误概念】

**师：** 现在看一下今天用的三步流程——

**师：** 窗口A——打开 Kimi，把这6个需求要点告诉 AI，请它整理成规范的需求文档（五部分格式：功能描述/触发条件/功能规则/交互规则/验收标准）。

**师：** 窗口B——全新 Kimi 对话，把文档发给「审核工程师」，让它只问问题不给答案，找出所有描述不清楚的地方。

**师：** 窗口C——再新一个 Kimi 对话，把补充完整的需求文档发给它，生成画图工具的 HTML 代码。

**师：** 我来演示窗口A这一步。

【教师打开 Kimi，用保底提示词一（见第5节）提交，投屏展示 AI 整理出来的需求文档结构】

**师：** 你看 AI 给我整理出来的格式——每个功能都有「功能规则」和「验收标准」。你们对比一下：AI 加的这些验收标准，我在口头说的时候有没有提到？

**生：** （预期：有几条我没说 / 填充桶的那条我没想到边界情况）

**师：** 对，AI 帮我补了一些我没说清楚的细节。但注意——AI 整理的内容可能有你不想要的，也可能漏掉你想要的。整理完之后要自己过一遍，确认每条都是你真正想要的。
【应用层：学生开始区分「AI 帮我补充的」和「我自己想要的」】

**学生实践 (Practice): (12分钟)**

学生操作：
1. 打开 Kimi，新建对话（窗口A）
2. 根据教师给出的保底提示词一，补充自己想要的特殊需求，提交
3. 拿到 AI 整理的需求文档，自己读一遍，圈出「这条我没提到的」和「这条说法我不认可的」
4. 打开新的 Kimi 对话（窗口B），把文档和审核提示词一起提交

> 教师走动观察重点：
> - 学生在窗口A拿到文档后，有没有真的读了一遍？还是直接复制粘贴给窗口B？「读一遍」是诊断这步的关键行为。
> - 窗口B的 AI 问了哪些问题？有没有学生对某个问题感到惊讶——「这个我真的没想过」是好信号。
> - 是否有学生在同一个对话窗口里同时做整理和审核？这是 M3 误概念的表现，需要介入。

**进度同步 (Checkpoint): (5分钟)**

**师：** 窗口B审核出来了，AI 问了你哪个最意外的问题？谁来说一下？

**生：** （预期 A：它问我「橡皮是把像素变透明还是变白色」，我没想过这两种不一样）

**师：** 好——这两种有什么区别？

**生：** （预期：透明就是真的没颜色，白色就是变成白色格子）

**师：** 对，区别很重要。如果背景是黑色的，你用橡皮想抹掉一块，变成「白色」就是留了个白点，变成「透明」才是真正删掉。你准备选哪个？

**生：** 透明！

**师：** 那就在你的需求文档里补上：「橡皮擦除后像素变为透明（alpha=0）」。

【诊断点：学生能否说出一条「因为 AI 审核问了这个问题，我补充了这条描述」，而不是「AI 问了很多，我不知道填哪些」】【理解层】

**【分支A】若学生能说出具体补充了什么：**
**师：** 很好。需求每补充一条，代码出问题的概率就降低一点点。这就是 Plan Mode 的价值。

**【分支B】若学生说「AI 问了很多但我觉得都不重要」：**
**师：** 好，拿出来看看。最意外的那条是哪个？我们一起判断——这条如果不补，代码生成出来会发生什么？
（引导学生预测后果，建立「需求漏洞→代码行为异常」的因果感）

**【分支C】若学生在同一窗口做了整理和审核：**
**师：** 我注意到你在同一个对话框里做的审核。还记得上节课说的「上下文污染」是什么意思吗？现在再开一个全新对话，把文档重新发过去，对比一下这次 AI 问的问题和刚才有没有不同。

---

**【分段二：窗口C生成画图工具 → 逐条验收 → 溯源修复】(20分钟)**

*本段重点：提交需求文档生成画图工具；建立「按需求逐条验收」的习惯；遇到问题先溯源需求再修改*

**预设误概念：**
- 误概念 M2：直接改代码比溯源需求更快
- 误概念：看起来能用就算完成，不需要逐条验收

**讲解与演示 (Teach & Demo): (3分钟)**

**师：** 需求文档补完了，进入窗口C——提交生成。把补充完整的需求文档粘贴进新的 Kimi 对话，加上保底提示词三，提交。

**师：** 生成完之后，你会拿到一段 HTML 代码。把这段代码复制出来，在 Trae 里新建一个 `draw-tool.html` 文件，粘贴进去，保存，用浏览器打开。

**师：** 打开之后——不要急着画。先做一件事：用你的需求文档，逐条验收。验收方式：你需求文档里写了什么，就测什么。

**师：** 我给你们一个最快的验收清单——五条最关键的：

【投屏展示验收清单】

```
1. 画笔工具：选颜色，点击画布能涂色
2. 橡皮工具：点击有颜色的格子，变为透明/白色
3. 填充桶：点击一片同色区域，整体换色
4. 多帧切换：点「帧1」「帧2」Tab，画的内容各自独立
5. 动画预览：点播放，两帧交替显示
```

**师：** 这五条，每条真的去操作一次，不能只「看起来好像对」。有一条不通过就标叉，写下「实际看到了什么现象」。
【应用层：建立「验收 = 逐条测试 + 记录现象」的习惯】

**学生实践 (Practice): (13分钟)**

学生操作：
1. 在 Trae 新建 `draw-tool.html`，粘贴 AI 生成的代码，浏览器打开
2. 按五条验收清单逐条测试，记录「通过✓」或「不通过✗ + 实际现象」
3. 遇到「不通过」先不改代码——找回需求文档，找到是哪条需求没说清楚，标注出来
4. 把找到的漏洞描述清楚（「步骤→预期→实际」格式），让 AI 针对性修复

> 教师走动观察重点：
> - 有没有学生遇到 bug 直接问 AI「帮我改这个 bug」，而没有先溯源需求？主动走过去问「你知道是哪条需求没说清楚吗？」
> - 有没有学生卡在代码生成失败（如 AI 输出不完整）？准备好备用的 demo-1-draw-tool.html，但先引导学生尝试重新生成
> - 验收清单有没有学生不知道「如何测试填充桶」？示范：先用画笔画一个封闭区域，再用填充桶点内部

**进度同步 (Checkpoint): (4分钟)**

**师：** 五条验收，全部通过的举手。

**师：** 好。有没有人验到「不通过」的？说一下你发现了什么。

**生：** （预期 A：帧1和帧2切换，但画的内容是共用的，切换没效果）

**师：** 好，你溯源到需求文档了吗？哪条需求没写清楚？

**生：** （预期：我写了「可以切换帧」，但没写「两帧的数据是独立存储的」）

**师：** 对，这就是漏洞。「切换帧」和「数据独立」是两件事，你只说了一件。现在补上这条，用「步骤→预期→实际」格式描述给 AI，让它修复。

【诊断点：学生能否从「出了 bug」出发，溯源到「是哪条需求没写清楚」，而不是直接「AI 帮我改一下」】【应用层】

**【分支A】若学生完成了溯源并修复了 bug：**
**师：** 这是真正的工程师思维——不是改代码，是改需求，然后重新生成。

**【分支B】若学生直接把代码发给 AI 说「帮我改」：**
**师：** 先停一下。你现在让 AI 改的是代码，但 AI 不知道你要的是什么效果。你能不能先找到需求文档里「两帧切换」那一条，把它描述得更清楚再提交？

**【分支C】若 AI 生成的代码完全无法运行（语法错误）：**
**师：** 遇到这种情况，先用「步骤→预期→实际」描述给 AI：「我打开 HTML 文件，浏览器显示空白/报错，期望看到画图工具界面」。让 AI 自己排查哪里有问题。如果还不行，可以用老师电脑上的备用 demo 继续后面的步骤——画角色才是今天更重要的部分。

---

**【分段三：用工具画角色（帧1待机 + 帧2攻击）+ 填属性JSON】(20分钟)**

*本段重点：用画图工具完成角色设计；理解两帧差异的审美原则；用20分预算制选定打法定位并填写属性*

**预设误概念：**
- 误概念 M4：两帧画一样就行，动画不重要
- 误概念 M5：属性随便填，反正都是数字

**讲解与演示 (Teach & Demo): (5分钟)**

**师：** 画图工具做好了。现在正式开始画你的战斗角色。

**师：** 先确认一件事——帧1和帧2要画什么？

**师：** 帧1是「待机」姿势——就是角色站在那里，什么都没发生。这一帧决定了角色的整体外形和配色。

**师：** 帧2是「攻击」姿势——角色在出击的那一瞬间。这一帧决定了动画的冲击感。

**师：** 我让你们看一个对比。

【投屏打开 demo-3-animation.html，分别导入两个角色：一个帧1和帧2完全一样，一个帧2明显前冲】

**师：** 哪个更有打击感？

**生：** 第二个！第一个完全没动……

**师：** 对，帧1和帧2差异越大，动画的冲击感越强。帧2复制帧1不修改，等于没有动画。攻击帧要做什么？肢体前冲、武器伸出去、颜色变化——让角色看起来「正在做某件事」。
【识别层：建立「帧1待机 vs 帧2攻击」的视觉差异意识，澄清 M4 误概念】

**师：** 画完之后，我们要给角色填属性。属性系统用的是「20分预算制」——你有20分，分配完就没了，怎么分是你的策略。

**师：** 四个属性：

【投屏展示属性表】

```
HP（生命值）：1分 = 10血  范围 3-10分
ATK（攻击力）：1分 = 5伤害  范围 2-10分
DEF（防御力）：1分 = 3减伤  范围 0-6分
SPD（速度）：1分 = 1速度值  范围 1-6分
```

**师：** 我给你们四种打法定位参考，你选一种，或者自己设计——

```
坦克型：HP 8 + ATK 4 + DEF 6 + SPD 2 = 20分（耗死对方）
刺客型：HP 4 + ATK 10 + DEF 0 + SPD 6 = 20分（一击毙命）
平衡型：HP 5 + ATK 5 + DEF 4 + SPD 6 = 20分（没有弱点）
速攻型：HP 6 + ATK 7 + DEF 1 + SPD 6 = 20分（先手压制）
```

**师：** 注意——你的角色外观要和你的打法定位「匹配」。刺客型画个超大的圆圆的胖角色，感觉不对；坦克型画个细细的小人，也感觉不对。角色的视觉设计要传达出它的战斗风格。

**师：** 还有一个特技系统——每个角色可以选一个特技，不占预算：

```
🔥燃烧：每回合额外-5血，持续3回合
🛡护甲：首次受击伤害归零
⚡连击：25%概率攻击两次
💉吸血：攻击回复伤害30%血量
❄️冰冻：每场一次，对方跳过下回合
🎯穿透：一次攻击无视防御
```

**师：** 选好了吗？现在开始画。先定打法定位，再动手画角色外形。
【应用层：学生开始从策略角度设计角色，而不是「随便画一个」】

**学生实践 (Practice): (12分钟)**

学生操作：
1. 在画图工具里，先选定自己的打法定位（坦克/刺客/平衡/速攻，或自定义）
2. 在帧1画待机姿势——确定角色外形、配色、整体风格
3. 点「复制帧1到帧2」，在帧2的基础上修改攻击姿势（肢体前冲、武器伸出、颜色变化等）
4. 预览动画，确认帧1和帧2有明显差异
5. 完成后，在 Trae 新建一个 `character.json`，填写属性数据：

```json
{
  "name": "你的角色名",
  "hp": 50,
  "atk": 25,
  "def": 12,
  "spd": 4,
  "special": "⚡连击",
  "description": "一句话描述你的打法"
}
```

> 教师走动观察重点：
> - 有没有学生帧2完全没改，只是复制了帧1？走过去问「攻击的时候角色在做什么动作？」
> - 有没有学生分配完属性后发现「总分超了20分」？引导他重新算一下
> - 关注速度慢的学生：如果卡在画角色，帧2可以暂时只改一两个像素，保证完成基本的两帧结构；细节可以之后优化

**进度同步 (Checkpoint): (3分钟)**

**师：** 谁的帧2跟帧1有明显不同的，把动画预览给大家看一下。

**生：** （学生展示动画预览）

**师：** 帧2里，角色做了什么动作？

**生：** （预期：他的手臂伸出来了 / 整个身体往前倾了）

**师：** 这就是攻击感。你们的打法定位是什么型？

**生：** 刺客型！

**师：** 刺客型——高攻低血。碰到坦克型怎么办？

**生：** （预期：先手攻击！速度快，先打对方）

**师：** 好，这说明你的策略是清晰的。你知道你的角色能赢谁，也知道怕谁——这才是策略设计。

【诊断点：学生能否说出自己的打法定位，并能解释「这个定位的优势和弱点」，而不只是「我觉得这个好看」】【应用层】

---

**第三幕：反思 (Contemplate) — 10分钟** 🤔

*本幕目标：2-3名学生展示角色并说出打法定位的策略思考；让其他学生从「对抗」角度给出评价*

**【环节】成果展示 (6分钟)**

**师：** 现在我们来做一个角色路演。每个人只说三件事：第一，你的角色叫什么名字；第二，你的打法定位是什么型；第三，你的特技是什么，为什么选这个。

**师：** 谁先来？

【1-2名学生上来展示角色动画，说出三件事】

**师：** （对展示的学生）你是刺客型，特技选了「穿透」。你的思路是什么？

**生：** （预期：因为刺客型攻击高，加上穿透直接无视防御，坦克型也扛不住）

**师：** 这个搭配有意思——高攻 + 穿透，专门克制高防御的坦克。但是你血量很少，碰到先手比你快的角色怎么办？

**生：** （预期：就……输了？ / 要速度快才行）

**师：** 所以你的角色有一个明显弱点。这不是坏事——有弱点才有对抗的乐趣。

**【环节】互评与讨论 (4分钟)**

**师：** 大家来评价刚才展示的这个角色——一个优点 + 一句「如果我拿XX型去打他，我的策略是」。

**生：** （预期：优点是攻击穿透很厉害；如果我用速攻型，速度比他快，先手打他，因为他血少可能一下就输了）

**师：** 很好——你在想「反制策略」了。这就是涂鸦PK的乐趣：不只是画角色，而是设计一个有自己思考的战斗方案。

**师：** 帧2动画有一个想问的——你们觉得帧2改变得最大、最有攻击感的是哪个角色？

【学生投票或说出谁的】

**师：** 为什么你觉得那个最有攻击感？

**生：** （预期：因为他帧2整个身体都往前扑了，和帧1差别很大）

**师：** 对——**差异越大，冲击感越强。** 这是今天审美设计的核心原则，记住它。

---

**第四幕：延续 (Continue) — 5分钟** 🚀

**【环节】抽象总结 (3分钟)**

**师：** 今天我们做了两件事：先用 Plan Mode 做出了画图工具，然后用工具画了角色、填了属性。我来问你们——今天用的三步流程（窗口A整理、窗口B审核、窗口C执行），和上节课做俄罗斯方块时有什么一样的地方？

**生：** （预期：流程完全一样 / 都是先写需求再生成）

**师：** 对——**流程是可以迁移的。** 这套流程不只用来做游戏，不只用来做画图工具。以后你们要做任何稍微复杂一点的项目，都可以用这三步。

**师：** 今天还有一个新东西——「先造工具，再用工具」。你们不是下载别人的画图软件来用，而是自己写了一个。这个思路以后还会用到：当你发现某个工具不好用，或者根本没有，你可以自己造。

**师：** 今天的「审美力」训练，核心是什么？

**生：** （预期：帧1和帧2差异要大 / 攻击帧要有动感）

**师：** 对，帧2差异越大，动画越有冲击感。这条原则不只用在像素画——你以后做任何动画、做任何交互，「差异对比产生冲击感」都是一条通用的审美原则。

【迁移层：将「先造工具」「差异产生冲击感」提炼为可迁移的思维模型】

**【环节】下节预告 + 5分钟挑战 (2分钟)**

**师：** 下节课——涂鸦PK（二）。你们今天画好的角色和属性，会被真正用来对战。我们要搭建一个战斗引擎，让你的角色和同学的角色打起来，看看谁的策略赢。

**师：** 想一想——你的打法定位，碰到哪种对手会输？下节课我们来验证。

**师：** 本周 5 分钟挑战：用你今天做的画图工具，帮一个同学画一个角色，然后对比和他自己画的有什么不同——外形、配色、攻击姿势，哪里不一样？拍照或截图，下节课分享。

---

### 5. AI助教使用指南

**教师演示用提示词（需求文档整理，窗口A）：**
```
你是一个需求分析师。我要做一个HTML5像素画图工具，功能是：64×64画布、8倍缩放显示、支持画笔/橡皮/填充桶、有调色板、两帧编辑（帧1待机/帧2攻击）、可复制帧1到帧2、有动画预览、能导出128×64 Spritesheet PNG。请把这些需求整理成规范的需求文档，包含：功能描述、触发条件、功能规则、交互规则、验收标准五个部分。
```

**审核用提示词（窗口B——新窗口，不要在整理窗口里使用）：**
```
你是一个挑刺工程师。下面是一份画图工具的需求文档，请只提出你觉得描述不清楚或有遗漏的问题（每个问题一行），不要给答案，不要写代码：

[粘贴需求文档]
```

**学生保底提示词（生成画图工具，窗口C）：**
```
请帮我用HTML5 Canvas做一个像素画图工具：64×64像素画布、8倍缩放显示、支持画笔/橡皮/填充桶、有颜色调色板（至少16色）、有两帧（帧1待机/帧2攻击）可切换编辑、可复制帧1到帧2、有动画预览（循环播放）、能导出128×64 Spritesheet PNG。单文件HTML，不用任何外部库。
```

**进阶提示词（属性 JSON 生成辅助）：**
```
我的角色是刺客型，打法是先手高爆发。20分预算制：HP/ATK/DEF/SPD各有范围限制（HP:3-10，ATK:2-10，DEF:0-6，SPD:1-6）。请帮我给出一个满足20分总预算、符合刺客型定位的属性分配方案，并说明每个属性为什么这样分配。
```

**属性分配参考表（投屏展示用）：**

| 打法定位 | HP | ATK | DEF | SPD | 合计 | 核心优势 |
|---------|----|----|-----|-----|-----|---------|
| 坦克型 | 8 | 4 | 6 | 2 | 20 | 血厚扛伤害，慢慢耗死对方 |
| 刺客型 | 4 | 10 | 0 | 6 | 20 | 先手高爆发，一击毙命 |
| 平衡型 | 5 | 5 | 4 | 6 | 20 | 无明显弱点，应对各种对手 |
| 速攻型 | 6 | 7 | 1 | 6 | 20 | 先手压制，中等爆发 |

---

### 6. 教师指南

**本课技术备注：**

- **Spritesheet 格式**：128×64 PNG，左半（0-63像素宽）是帧1，右半（64-127像素宽）是帧2。对战引擎会按这个坐标裁取每帧。导出时必须确保两帧横向拼接，否则下节课的战斗引擎无法正确读取。

- **Canvas 像素操作**：画图工具底层用 `getImageData/putImageData` 操作像素数组。每个像素有 RGBA 四个值（各0-255）。橡皮设为「透明」等于把该像素的 alpha 通道设为 0。这部分不需要传达给学生，但教师需要了解，以便解释「橡皮变透明 vs 变白色」的区别。

- **填充桶（洪水填充）**：用 BFS 或 DFS 算法扩展同色区域。如果学生报告「填充桶没有反应」，可能是起点像素和周边颜色完全相同导致；让学生先用画笔画一个封闭区域再测试。

- **帧数据独立存储**：每帧用一个独立的 `Uint8ClampedArray` 存储像素数据。切换帧时先保存当前帧数据，再加载目标帧数据。如果生成的代码两帧共用数据，需要在需求里补充「每帧像素数据独立存储，互不影响」。

- **导出 PNG**：用 `canvas.toDataURL('image/png')` 获取 base64 编码后触发下载。导出前需要把两帧数据拼接到一个 128×64 的临时 canvas 上再导出。

**常见问题 FAQ：**

| 问题 | 应对 |
|------|------|
| 「AI 生成的代码报错，打开是空白页」 | 让学生把报错信息（浏览器 F12 控制台）截图给 AI，用「步骤→预期→实际」描述问题让 AI 修复 |
| 「橡皮擦了但颜色还在」 | 先确认是否切换到了橡皮工具；如果工具选对但无效，可能是代码把橡皮当成了「白色画笔」，需要溯源需求文档里橡皮的功能描述 |
| 「填充桶整个画面都变色了」 | 这是填充桶「溢出」问题——起点像素周围没有封闭边界，颜色扩散到整个画布。让学生先用画笔封闭区域再用填充桶 |
| 「帧1和帧2切换后内容一样」 | 需求文档里需要补充「两帧像素数据独立存储」；溯源后让 AI 修复数据存储逻辑 |
| 「导出的 PNG 只有一帧」 | 需求里「128×64 Spritesheet」的描述可能没说清楚是「两帧横向拼接」；补充描述后重新生成导出功能 |
| 「20分分配不够，不知道怎么算」 | 给学生纸笔，列出四个属性的分值，加减法算一遍；主要目的是让学生思考优先级，不是数学练习 |
| 「帧2不知道怎么画才有攻击感」 | 给三个具体操作方向：1）身体/手臂前倾；2）把武器或特效从帧1的位置移动到「伸出去」的位置；3）帧2加一些颜色特效（爆炸光晕、冲击线条） |

**课堂风险预案：**

- **AI 服务不可用**：使用 `demo-1-draw-tool.html` 作为备用画图工具，跳过 Plan Mode 生成步骤，直接让学生用 demo 画角色。Plan Mode 三步可以在白板上演示讲解，不需要真的生成。
- **学生进度差异过大**：画图工具生成完成的学生直接开始画角色；还在 Plan Mode 阶段的学生可以在分段三时使用教师备用的 demo-1-draw-tool.html 画角色，保证每位学生都能产出两帧角色。
- **属性分配争议（学生觉得某个定位「必胜」）**：预先告知下节课会有实际对战，不同对手克制关系不同，没有「必胜型」。这个问题留到实战后讨论，今天重点是把角色画完。

---

### 7. 5分钟日常AI挑战

**本周挑战：** 用画图工具帮同学画一个角色，然后对比差异

**挑战说明：**
用你今天做好的画图工具，帮一个同学（家人或朋友也行）画一个角色（帧1待机 + 帧2攻击），然后让他自己也画一个版本，对比两个版本有什么不同：外形、配色、攻击姿势，哪里不一样？想一想：为什么会不一样？是因为你们对「好看」的标准不同，还是因为对「攻击感」的理解不同？

**下节课分享：** 下节课选2-3位同学展示「你画的版本」和「同学画的版本」，说出最大的一处差异是什么。

---

### 8. 拓展任务

**拓展一（推荐）：** 设计一个「克制链」——你的角色克制哪种打法定位的对手，被哪种打法定位克制？用文字写出来：「我是XX型，我克制XX型，因为……；我怕XX型，因为……。」然后想想下节课对战时要不要调整属性。

**拓展二（挑战）：** 给你的角色再画一帧「受伤帧」——当角色被攻击时显示的状态（帧3）。试着修改画图工具的代码，让它支持三帧编辑，并在动画预览里加入「受伤」动画。