Files
AICODE2026/3-lessons/AICODE-06/AICODE06-12 Skills入门-跳一跳.md
Rocky 1c5e72676b feat: AICODE-06 春季后半 7 课大纲 + 第 12 课教案 + prototype 工程产物
## 主要变更

### 课程设计
- 大纲扩展到 18 课(新增第 12-18 课:单词塔防 3D 大项目)
- 引入 AI 三角色协作工作流(Planner / Reviewer / Tester)作为整学期框架
- 每课详化:核心概念 + 误概念预设 + 教学锚点 + 学生产出 + 老师课前要准备

### 第 12 课教案(完整逐字稿)
- 主题:Skills 入门 - 用 game-studio 做跳一跳
- 90 分钟 4C 结构 + 诊断点 + 分支策略
- 5 个误概念预设 + AI 助教提示词模板 + 教师备课指南

### prototype 工程产物(可玩 demo)
- 跳一跳-3d/index.html:Three.js 3D 跳一跳(蓄力 + Web Audio 音效 + PERFECT 命中)
- 单词塔防/game-3d.html:完整 3D 塔防(三阶段 + 商店 + 卡片 + 战斗循环,15 击杀完美胜利)
- 单词塔防/level-editor-3d.html:3D 关卡设计器(Kenney GLB 模型 + localStorage 保存)
- 单词塔防/level-editor.html:2D 关卡设计器(原型保留)
- 单词塔防/index.html:2D 塔防原型(原型保留)

### 工程加固
- .gitignore 加强:排除 token、Kenney 大素材、调试截图、第三方插件、Playwright 临时
- 从 git tracking 移除 scripts/.dingtalk_token.json(本地保留)
- scripts/sync_to_dingtalk.py:OAuth 流程改为手动 authCode 粘贴(避免本地 server 受限)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-18 23:04:54 +02:00

26 KiB
Raw Blame History

课时, 主题, 核心能力, 核心工具, 时长, 透明化层级, 适用路线
课时 主题 核心能力 核心工具 时长 透明化层级 适用路线
12 Skills 入门 — 用 game-studio 做跳一跳
提问力
韧性力
QonnwolfCode/Trae
game-studio 插件
Three.js
90分钟 过程层 AICODE-06

1. 课程目标

知识目标:

  • 理解 Skills 的本质 = 工具箱:给 AI 装的"专业工具",装了 AI 就能在那个领域调用专业方法,不用自己造轮子
  • 理解 AI 不是无所不能:通用 AI 知道一点点东西,但不专业;装 Skills 才能在特定领域表现专业
  • 理解 插件机制:插件是 Skills 的容器,一个插件可以包含多个 Skills(game-studio 包含 9 个 Skills)
  • 理解 国产模型 ≠ 一击必胜:即便装了 Skills,代码也需要审查迭代——这是下节课引入 Subagent(自动审核员) 的原因
  • 预先感知 Subagent 概念 = 独立上下文窗口:Subagent 等于另开一个会话,不污染主对话——下节课正式深入

能力目标:

  • 能在 QonnwolfCode/Trae 里安装 game-studio 插件(操作能力)
  • 能用自然语言让 AI 调用 phaser-2d-gamethree-webgl-game skill 做出可玩的小游戏(提问力)
  • 对比"装 vs 不装"差异,亲眼判断 Skills 的价值(韧性力)
  • 能基于 AI 生成的代码做个性化定制:改背景色、改判定阈值、加音效(提问力)

情感目标:

  • 体验"我装了一个食谱,AI 就突然会做这道菜"的爽点
  • 建立"AI 不是万能,但通过 Skills 可以变得专业"的正确认知
  • 感受到 90 分钟从 0 到一个能玩的 3D 跳一跳的成就感
  • 对"AI 工程化"产生兴趣——课程后续将打开更大的世界

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

核心概念认知层级:

概念 学生类比 认知层级
Skill(技能/食谱) 一本"做某菜的食谱"——AI 是厨师,Skill 是给厨师的专业菜谱 理解层
插件(Plugin) 食谱本——一本书里有 9 个不同的食谱(game-studio 有 9 个 skill) 识别层
装插件 厨师拿到一本新食谱——立刻知道怎么做这一类菜 应用层
通用 AI vs 装 Skill 的 AI 普通厨师(会做一点点)vs 专业大厨(精通这道菜) 理解层
three-webgl-game skill 专门教 AI 怎么用 Three.js 做 3D 游戏的"教材" 识别层

典型误概念表:

编号 误概念 正确认知 激发策略
M1 "AI 本来什么都会,Skills 没什么用" 通用 AI 知识广但不精;Skills 让它在某领域突然变专业 演示:不装 game-studio 让 AI 做 3D 跳一跳 → 翻车;装上 → 一次成功
M2 "Skills 是网上下载的代码,装上就能跑" Skills 不是可执行代码,是给 AI 的"操作手册"——AI 读完后按手册写出符合规范的代码 让学生打开 game-studio 的 SKILL.md 看看,里面全是文字说明而非代码
M3 "Skills 越多越好,全装上" 装太多 skill 反而互相干扰;要按任务装合适的 类比:厨师不会同时用川菜 + 法餐 + 寿司食谱做同一道菜
M4 "AI 用 Skill 写出来的代码,我都看不懂就直接用" 即便 AI 写得对,学生也要能定制(改颜色、改音效、改阈值)——这是产品设计师的核心能力 课程末尾要求学生改至少 3 处:背景色、PERFECT 阈值、音效音调
M5 "Skills 只能用在游戏" game-studio 只是众多插件之一;Skills 可以覆盖任何专业领域(文案/数据/设计...) 课末预告:下节课你会看到完全不同的 Skill

3. 教学准备

工具与环境:

  • QonnwolfCode CLI(或 Trae IDE,已预装 game-studio 插件可用版本)
  • Node.js 已装(Phaser/Three.js CDN 模式不强依赖,但有 Node 便于本地服务器)
  • 浏览器:Chrome 最新版
  • 老师机器:game-studio 已装好(用作演示对比)
  • 学生机器:game-studio 默认未装(让学生自己装,体验"装上的瞬间")

教学资源:

  • 老师准备:
    • 老师备课包:prototype/跳一跳-3d/index.html(可玩 3D 跳一跳成品,作为最终展示)
    • 失败演示资源:不装 game-studio 时让 AI 写跳一跳的烂代码截图(可课前录好)
    • 简化保底版本:如果学生卡壳,提供一个"半成品"HTML 让学生只做定制
    • 音效音调对照表:打印一张"哪些频率好听"的小卡片
  • 学生资源:
    • 涂鸦PK 第10课的 Web Audio 经验(回收)
    • 之前做过的 Phaser CDN 经验(回收,虽然这次用 Three.js)

教师备课体验任务(老师必做)

备课前,老师必须亲自完成:

  1. 在干净环境里走一遍:先卸载 game-studio,让主 AI 写跳一跳,亲眼看到翻车样子(录屏或截图准备好失败案例)
  2. 装上 game-studio 走一遍:让 AI 用 three-webgl-game skill 重做,确认可以一次成功(否则课堂会翻车)
  3. 预先想好"学生卡壳的 3 个点":
    • 装插件命令记不住 → 准备命令小卡片
    • AI 输出长代码学生看不懂 → 准备"只关注 background-color"的引导
    • 定制时不知道改哪一行 → 在代码里加 // TODO: 这里可以改你喜欢的颜色 注释

4. 教学流程

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

【环节】上节课回顾 + 课前热身 (3分钟)

师: 各位探险队员,涂鸦PK 锦标赛你们做的角色我记得很深——能用一句话说说你最得意的设计吗? 生: [预设回应 A] 我做了个全堆攻击的爆发型,一回合秒杀! 生: [预设回应 B] 我做了个奇怪的逃跑型,赢了好几场! 【诊断点:学生是否能用"设计决策"语言,而非功能列表表达】

师: 不错!所以你们已经会从"我做了什么功能"上升到"我为什么这样设计"——这是产品设计师的眼光。 师: 今天我们要进入一个全新的阶段——AI 工程师的眼光。

【环节】成品展示 + 抛问题 (7分钟)

师: 我先给你们看一个东西—— [老师打开 prototype/跳一跳-3d/index.html,屏幕上出现 3D 跳一跳] 师: 这是一个 3D 跳一跳。来 [点名一个学生],你上来玩一下。 [学生上台玩 1-2 分钟,老师在旁边解说:按住空格蓄力,松开跳跃,PERFECT 命中得 3 分] 师: 大家觉得这个游戏怎么样? 生: [预设 A] 挺好玩的! 生: [预设 B] 比我之前做的那些还好看! 师: 我告诉你们一个秘密——这个游戏,90% 的代码是 AI 写的,我只在旁边引导。 师: 你们觉得这怎么做到的?为什么 AI 突然变得这么厉害了? 生: [预设 A] AI 越来越聪明了? 生: [预设 B] 老师用了什么我们不知道的 AI? 师: 不是。我用的还是你们之前用的 AI。 师: 但我给它装了一个东西——叫 Skills师: 今天我们就来学:Skills 是什么?为什么装上之后 AI 变厉害了?

诊断点:学生对"Skills"有没有先验认知】【认知层级:识别层】

【分支 A】若学生立刻说"我知道,Skills 是技能!" 师: 对,字面意思是技能。但它的本质是什么? AI 已经有技能了,为什么还要"装"?今天就是要回答这个。

【分支 B】若学生沉默或好奇 师: 好,带着这个好奇心往下听——你今天结束时就会变成专家,能给家长讲清楚。


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

【分段一:演示痛点 — 不装 game-studio 时 AI 翻车】(15分钟)

预设误概念:

  • 误概念 M1:"AI 本来什么都会"
  • 误概念 M2:"Skills 是可下载的代码"

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

师: 我先做一个对照实验给你们看。 师: 现在,我没有装 game-studio 插件。这就是普通的 AI。 师: 我让它做一个 3D 跳一跳——跟刚才那个一样的——看会发生什么。 [老师打开 QonnwolfCode,确认 plugins 列表里没有 game-studio] 师: [输入] "用 Three.js 给我做一个 3D 跳一跳,小球从一个平台跳到另一个平台,有计分,有动画。" [AI 开始生成代码,过程中老师一边看一边解说] 师: 你们看,AI 在写 Three.js 的代码——它知道 Three.js,这没错。 师: 但是......

[关键:把 AI 生成的代码运行,大概率会出现 bug:平台位置错乱、小球穿模、没有跳跃逻辑、画面平淡]

师: 看,代码跑起来了,但不像跳一跳——小球乱飞,没有蓄力机制,画面一片混乱。 师: 为什么?AI 不是知道 Three.js 吗? 生: [预设 A] 也许它没理解清楚需求? 生: [预设 B] 代码写得不够多?

诊断点:学生能不能识别"AI 知道但不专业"的本质区别】【认知层级:理解层】

师: 都不是。问题在于:AI 知道一点点 Three.js,但它不懂游戏开发的'专业套路'——比如: 师: 1. 小球跳跃要用什么样的抛物线?它不知道行业标准做法 师: 2. 平台间距怎么设计才合理?它不知道游戏关卡的尺度 师: 3. 蓄力机制要不要、怎么做?它没经验 师: 4. PERFECT 判定的阈值多少才有挑战又不太难?它不知道 师: AI 像一个会一点点烹饪基础的人,你让他做"宫保鸡丁",他知道大致流程,但做不出地道的味道。

学生实践 (Practice): (8分钟)

师: 现在你们试一次——让你们的 AI(也是没装插件的版本)做一个 2D 跳一跳。 师: 看会发生什么。 [学生在自己机器上输入需求,等待 AI 输出] [老师走动观察:谁的屏幕没动,谁打开代码不知道看什么]

【可能的学生反应】

  • 反应 A:AI 输出代码,但学生不知道怎么跑 → 老师提示:复制到 HTML 文件,浏览器打开
  • 反应 B:代码有 bug 跑不起来 → 老师高兴地说:"对了!这就是今天要看到的现象——AI 不专业的样子"
  • 反应 C:勉强能跑但难玩 → 老师:"看,这就是问题"

进度同步 (Checkpoint): (2分钟)

师: 大家的 AI 做出来的跳一跳怎么样?好玩吗? 生: [预设 A] 跑不起来! 生: [预设 B] 跑起来了但很丑/很怪 生: [预设 C] 我觉得还可以(少数自信的学生)

诊断点:学生体感"通用 AI 不够专业"的认知有没有建立】

师: OK,我看大家的状态都很一致——AI 不是不会,是不够专业师: 所以问题来了:怎么让 AI 变专业?


【分段二:Skills 救场 — 装 game-studio 后 AI 变身】(15分钟)

预设误概念:

  • 误概念 M1 二次激发:"AI 本来什么都会"
  • 误概念 M3:"Skills 越多越好"

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

师: 现在我要给 AI 装一个东西——这就是今天的关键词:Skills(技能 / 食谱)。 师: 我要装的这个插件叫 game-studio——它里面有 9 个 Skills,专门教 AI 怎么做游戏。 [老师在 QonnwolfCode 里输入 /plugin install game-studio,确认安装成功] 师: 看,装好了。 师: 现在,同样的需求——你们注意,我说的话和刚才几乎一样。 [老师输入]:"用 Three.js 给我做一个 3D 跳一跳,小球从一个平台跳到另一个平台,有计分,有动画。" [AI 开始生成。这次:速度更快,代码更整洁,直接调用 three-webgl-game skill 的标准模式]

师: 你们看,AI 这次还是 AI——不是换了一个 AI——但它的输出完全不同。 [运行结果:漂亮的 3D 跳一跳,蓄力 + 跳跃 + 计分都对] 师: 这就是 Skills 的力量。 师:没有改 AI,没有改我的问题——我只装了一本'食谱',AI 就突然懂行了。

师: 来一个类比让你们彻底懂: 师: AI 是一个厨师师: Skill 是一本食谱师: 厨师本来会做"大概的菜"——但拿到食谱,他立刻知道"这道菜的专业做法"。 师: AI = 厨师,Skill = 食谱,装 Skill = 给厨师菜谱

诊断点:类比有没有让学生秒懂】【认知层级:理解层】

师: 谁能用自己的话再说一遍 Skill 是什么? 生: [预设 A] Skill 就是一本书,AI 读完就会做了! 生: [预设 B] Skill 是给 AI 装的"专业技能"!

师: 都对。但记住一个细节——Skill 不是代码,是给 AI 看的操作手册。 [老师打开 game-studio/skills/three-webgl-game/SKILL.md,展示给学生看] 师: 你们看,这里面全是文字说明——"3D 游戏架构应该怎么分层"、"相机怎么放"、"性能怎么优化"。它不会自己运行,但 AI 看完后,写出来的代码就符合这些规范

学生实践 (Practice): (5分钟)

师: 现在你们也来装 game-studio。 师: 命令是:/plugin install game-studio(老师在大屏幕上贴出来) [学生跟着输入]

进度同步 (Checkpoint): (2分钟)

师: 装好的同学举手? 师: 装好的同学,让你的 AI 重做一次跳一跳——看看跟刚才"没装"时有什么不同。 生: [预设 A] 哇!这次代码看着干净多了! 生: [预设 B] 跑起来了!但还差点东西 生: [预设 C] 我的还是不太行(老师过去帮忙)

诊断点:学生有没有亲眼看到"装 vs 不装"的差异】


【分段三:学生跑通跳一跳完整版】(15分钟)

预设误概念:

  • 误概念 M4:"AI 写出来的代码看不懂就直接用"

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

师: OK 现在大家都装了 game-studio,AI 也写出了基础版师: 但跟我开头展示的那个完整版比,你们的还差几个关键点: 师: 1. 蓄力机制(按住空格才能蓄力,松开跳跃)——不只是按一下跳一下 师: 2. PERFECT 命中奖励(精准落到平台中心 +3 分) 师: 3. 音效(跳跃声、落地声、PERFECT 声) 师: 4. 小球的动画(被压扁、旋转)

师: 这些都是让游戏好玩的关键——不是"功能",是"手感"。 师: 怎么让 AI 加上?用你的提问力师: 我给你们一个模板:

请帮我在这个跳一跳基础上加:
1. 蓄力机制:按住空格才蓄力,松开跳。蓄力越久跳越远
2. PERFECT 命中:落地距离中心 < 0.15 时,显示"+3 PERFECT!"
3. 音效:跳/落地/PERFECT 各有一个声音(用 Web Audio API)
4. 动画:小球蓄力时压扁,跳跃时旋转

学生实践 (Practice): (10分钟)

师: 把这个模板改成你的话(可以加更多功能、可以减),发给 AI,让它加。 师: 一定要自己测试——跑起来不对就告诉 AI 哪里不对。 [学生自由迭代;老师走动]

【可能的学生反应】

  • 反应 A:AI 加上了所有功能但跑不起来 → 老师:"看 console,贴给 AI 让它修"
  • 反应 B:学生加了一堆功能但忘了说"基础上"导致 AI 重写整个游戏 → 老师:"提醒 AI'在原代码基础上修改,不要重写'"
  • 反应 C:学生想加自己的功能(比如换主角形状)→ 老师:"很好!那就是下节课要讲的'个性化定制'"

进度同步 (Checkpoint): (2分钟)

师: 谁来分享一下,你的跳一跳跟我的有什么不同? 生: [预设 A] 我的小球是粉色的! 生: [预设 B] 我加了一个"跳到一半响一下"的音效! 生: [预设 C] 我的 PERFECT 阈值改成 0.3 了,更容易得 PERFECT!

诊断点:学生开始有"自己的版本"的意识】【认知层级:应用层】


【分段四:个性化定制 — 改 3 处】(20分钟)

预设误概念:

  • 误概念 M4:"AI 写出来的代码看不懂就直接用"
  • 误概念 M5:"Skills 只能用在游戏"

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

师: 现在大家都有了一个自己的"跳一跳基础版"。 师:真正的产品设计师不会满足于'AI 给我的'——他们会改成自己的样子师: 你们要改 3 处: 师: 1. 背景颜色(浅蓝太老套了,改成你喜欢的) 师: 2. PERFECT 阈值(0.15 太严,改成 0.3 让自己容易得 PERFECT;或者改成 0.05 让自己玩得更挑战) 师: 3. 至少一个音效的频率(让"跳"的声音不一样)

师: 重点:不是让 AI 改,是你自己改代码——这样你才知道"代码到底在做什么"。 师: 我给你们一个找代码的方法: 师: - 想改背景色?在代码里搜 backgroundcolor 师: - 想改 PERFECT 阈值?搜 0.15perfect 师: - 想改音效频率?搜 playTonefrequency

学生实践 (Practice): (15分钟)

[学生独立改 3 处;老师走动观察]

【可能的学生反应】

  • 反应 A:改了一下跑不起来 → 老师:"你改完了再保存重新打开浏览器"
  • 反应 B:不知道哪一行是背景色 → 老师指着代码:"看,这一行 background-color: ..."
  • 反应 C:学生想改更复杂的东西(比如平台形状)→ 老师:"很好!那就是你的进阶——AI 写的代码你能改的越来越多"

进度同步 (Checkpoint): (2分钟)

师: 大家改成你自己的样子了吗?分享一下最得意的改动? 生: [预设 A] 我把背景改成深紫色,小球改成绿色,看起来像在外太空! 生: [预设 B] 我把 PERFECT 阈值改到 0.5,现在我每跳都是 PERFECT! 生: [预设 C] 我的"跳"声音改成超高频,像鸟叫!

诊断点:学生是不是从"用 AI 给的"转变成"做自己的"】【认知层级:应用层 → 迁移层】


第三幕:反思 (Contemplate) — 8分钟 🤔

【环节】成果展示 + 互玩 (5分钟)

师: 现在 2 个最大胆的同学上来——展示你们的跳一跳!不只是玩,还要讲你改了什么、为什么这么改。 [2-3 名学生上台] 师: [展示完后] 现在 3 分钟自由互玩——比谁分高! [学生互相打开同桌的网页玩]

【环节】元认知讨论 + Skills 工具箱类比 (3分钟)

师: 大家今天做了一件事:给 AI 装了一本食谱,然后让 AI 帮你做出游戏师: 这跟之前所有的"让 AI 写代码"有什么不一样? 生: [预设 A] 之前我们让 AI 写,它经常出错;今天写得准确多了 生: [预设 B] 今天感觉 AI 真的"懂"游戏了 生: [预设 C] 之前都是从零开始,今天是"在 AI 给的基础上修"——效率高多了

诊断点:学生有没有从"AI 是个工具"上升到"AI 是个可装备的合作者"】【认知层级:迁移层】

师: 我要再给你们一个更准的类比——之前我说 Skill 是"食谱",其实更准确的说法是: 师: Skill = 给 AI 装的"工具箱"师: 不是 AI 变聪明了——是 AI 多了一些'专业工具'能用师: 比如:你装了"电锯 skill",你说"砍这棵树",AI 就用电锯;不装,它只能用斧头——一样能砍,但慢、不专业。 师: Skills 就是 AI 的'工具箱'——你给它的工具越好,它做事越专业。 师: 这一点非常重要:学生不用自己造轮子——AI 工程界已经有大量好用的 Skills,你装上直接用就行师: 这是真实工程师的工作方式——调用现成的好工具,不重新发明


第四幕:延续 (Continue) — 7分钟 🚀

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

师: 今天用一句话总结: 师: "Skill = 给 AI 的工具箱。装上工具,AI 就在那个领域突然变专业了。"

【环节】抛出真问题 — 国产模型 ≠ 一击必胜 (2分钟)

师: 我要给你们说一个老师不告诉你们的小秘密—— 师: 即便装了 Skills,AI 写的代码也不是一次就完美—— 师: 我们用的国产大模型(豆包、Kimi、文心、通义...)往往不能一击必胜。需要审 → 改 → 再审 → 再改,可能要好几轮。 师: 那问题来了——谁来审? 师: 我之前的做法是这样的(老师做痛苦表情演示): 师: "写完代码 → 复制 → 粘贴到另一个窗口 → 让 AI 审 → 复制审核意见 → 粘回主窗口 → 让 AI 改 → 又复制 → 又粘 → 又审..." 师: 学生:听起来很累吧? 生: [预设] 累!麻烦!

【环节】Subagent 预告 — 自动化审核 (3分钟)

师: 下节课的核心新概念:Subagent(子智能体)——专门解决这个痛点。 师: 什么是 Subagent?用一句话:它是 AI 召唤的另一个 AI 助手,有自己独立的窗口师: 关键原理:Subagent 等于开了一个新会话——它不污染你的主对话,也不被主对话的历史污染完全独立的上下文窗口师: 这意味着什么?它是一个干净的、专业的、独立的审核员师: 下节课你们会做这件事: 师: 1. 主 AI 帮你写代码 师: 2. 你说一句"帮我召唤 Reviewer(审核员)审一下" 师: 3. Subagent 自动审、自动给意见、自动改——你不用复制粘贴了 师: 4. 直到没有问题为止 师: 完全自动化的工作流

【环节】未来路线图 — 三角色协作 (1分钟)

师: 后续我们会建立 3 个 AI 角色,让它们协作完成你的塔防游戏: 师: 🧑‍💼 Planner(计划员) — 负责写"PRD"(产品需求文档) 师: 🔍 Reviewer(审核员) — 审计划、审代码,挑毛病 师: 🧪 Tester(测试员) — 用 Playwright 自动测试你的游戏 师: 你不写一行代码——只发号施令。这 3 个 AI 自己协作做出你的塔防。 师: 这是真正的 AI 工程师工作流——管理 AI 团队,而不是自己写代码。

【环节】5 分钟挑战 (无新内容,直接发布)

师: 本周的 5 分钟 AI 挑战:给跳一跳加一个你最喜欢的功能—— 师: - 加一个"BOSS 平台"(深红色,得 5 分) 师: - 加一个"反向跳"功能(向左跳) 师: - 加一个"双倍蓄力"模式(按 Shift+空格) 师: 下周来上课时拿给大家看!


5. AI助教使用指南

教师演示用提示词:

[不装 game-studio 版本]
用 Three.js 给我做一个 3D 跳一跳,小球从一个平台跳到另一个平台,
有计分,有动画。
[装 game-studio 后版本]
用 three-webgl-game skill 做一个 3D 跳一跳:
- 小球可以蓄力跳跃(按空格蓄力,松开跳)
- 蓄力越久跳越远(蓄力时小球被压扁可视化)
- 落到下一个平台 +1 分,中心 PERFECT +3 分
- Web Audio 合成跳/落地/PERFECT 音效
- 等距视角 + 阴影,卡通可爱风格

学生保底提示词(如果学生想不出怎么说):

请用 game-studio 的 three-webgl-game skill 帮我做一个 3D 跳一跳:
1. 小球可以跳跃(按空格)
2. 落到平台得分
3. 落到地上 GAME OVER
其他细节你看着办。

进阶提示词(学有余力):

在我的跳一跳基础上,加一个"双人对战"模式:
- 左边玩家用 A/D 控制,右边玩家用 ←/→
- 各有自己的平台序列
- 谁先得 20 分谁赢

6. 教师指南

本课技术备注:

  • game-studio 插件实际是 9 个 SKILL.md 文件 + 部分 Python 脚本的集合
  • 当前用到的关键 skill:
    • three-webgl-game — 教 AI 用 Three.js 做 3D 游戏(本课主要用)
    • phaser-2d-game — 教 AI 用 Phaser 做 2D 游戏(如果学生选 2D 跳一跳)
    • game-playtest — 自动化测试(第 15 课会用)
  • Three.js 通过 CDN 加载,不需要 npm install——这是教学场景的关键(零环境配置)

常见问题 FAQ

问题 应对
学生没装 Node.js 怎么办? Three.js CDN + 单文件 HTML 不需要 Node;只是用 python3 -m http.server 起本地服务器即可
AI 写的代码学生看不懂? 不要求学生全懂——只要求改 3 个具体地方(背景色/PERFECT 阈值/音效)就行
学生改完代码报错? 浏览器按 F12 看 console,把错误贴给 AI,AI 一般能修
学生抱怨 game-studio 装不上? 备用方案:用老师机器演示,学生直接拿到老师写的 index.html 改定制
学生改完发现"装 game-studio 没看出来差别"? 让 ta 真的对比:**先开"未装版"AI 的代码(老师备好的截图)**vs 自己装上后的版本,差异一目了然

课堂风险预案

  • 如果 game-studio 服务不可用 → 老师准备好"装完成"的截图 + 完整代码,直接发给学生改定制(跳过"装"步骤,聚焦"个性化"环节)
  • 如果学生进度差异过大 → 已完成的学生帮卡壳的学生(同伴互助)
  • 如果时间不够 → 砍掉"个性化定制 3 处"(分段四),只完成"装 + 跑出基础版"

7. 5分钟日常AI挑战

本周挑战:给跳一跳加一个你最喜欢的功能

挑战说明:

  • 可以是 BOSS 平台(深红色,得 5 分)
  • 可以是反向跳(向左跳)
  • 可以是双倍蓄力(按 Shift+空格)
  • 可以是连击奖励(连续 3 个 PERFECT 给"双倍下一关")
  • 要求:能跑、能看到、能讲出"我为什么这么设计"

下节课分享:下周课上选 2-3 位同学展示自己的"个性化跳一跳"


8. 拓展任务

拓展一(推荐):

  • PERFECT 阈值动态化——分数越高,PERFECT 阈值越严(0.15 → 0.12 → 0.10)
  • 让 game-studio 帮你写"难度递增"逻辑

拓展二(挑战):

  • 触屏支持——在手机/平板上能玩
  • 让 AI 加 touchstart / touchend 事件
  • 拿手机扫码玩自己的跳一跳

拓展三(超挑战):

  • 多 Skill 组合——同时装 game-playtest skill,让 AI 自动测试你的跳一跳
  • 体验"Skills 组合拳"

教学课后笔记(老师课后填写)

  • 学生对"Skills"概念的接受度:?/10
  • "装 vs 不装"演示的效果:?/10
  • 学生个性化定制完成率:__%
  • 下次改进点:_________