五线谱的本质 = 把音高画成上下位置。小鸟落点高低 → 音高,飞行方向 → 旋律走向。这是把乐理底层结构原样做成可见世界(具身认知)。
Canvas/SVG 画五线谱 + Web Audio 发声 + 时间轴动画 + Y 坐标容差判定。纯前端可实现,我们的技术栈完全够用。
① 落点轨迹 = 旋律形状(曲线即旋律,潜意识输入)② 三层递进:看小鸟飞 → 指挥小鸟飞 → 画出旋律线 ③ 结合音准(同心圆)
| 乐理概念 | 世界化身 | 孩子的心智模型 | 游戏动作 |
|---|---|---|---|
| 音高 | 上下位置(五线谱=天空) | 高=上,低=下 | 点 / 跟 / 唱 |
| 音阶 | 楼梯 / 台阶 | 音是一个一个往上走的 | 跳台阶、排序 |
| 音准 | 同心圆准星 | 唱得准=对准圆心 | 对麦跟唱 |
| 时值/节奏 | 距离 + 鼓点 | 音有长短,拍子有规律 | 拍打、走路 |
| 和弦 | 颜色合成 | 几个音叠一起=新颜色 | 收集三色点亮石碑 |
| 旋律 | 飞行轨迹线 | 音连起来是一幅画 | 指挥小鸟飞 |
原理:每个乐理概念 = 一个心智模型 = 一个游戏动作,三者绑定后机制就标准化了。
每关严格按:观察 → 体验 → 挑战 → 点亮石碑。目的:建立「位置→音高→音阶」的心智映射。
| 字段 | 定义 | 示例(音阶楼梯) |
|---|---|---|
| ① 乐理概念 | 一句话定义(孩子能懂的话) | "音是一个一个往上走,像爬楼梯" |
| ② 心智模型 | 孩子脑中要形成什么 | 音阶 = 高低排列 + 级进 |
| ③ 游戏动作 | 玩家做什么 | 点 / 拖 / 唱 / 拍 |
| ④ 判定规则 | 什么算对/错,容差多少 | 目标音 ±1 级算对(先宽后严) |
| ⑤ 反馈协议 | 对→庆祝;错→再试+示范;3错→精灵示范 | 见下方统一协议 |
| ⑥ 目标 | 本关"完成"的定义(不是全对) | "帮 5 只鸟按顺序回家" |
✅ 正确:欢呼 + 发光 + 唱音 + 光点连线
❌ 错误:永不出现"×",小鸟歪头 → "再听一次" → 自动重播示范
🔁 3错:不惩罚,进入精灵示范模式(模仿即算参与)
🎉 过程:每次尝试都有正反馈("听到了!很接近!")
📈 进度:收集的音符累积在石碑上,永远可见
① 没有"答错",只有"再试一次"
② 判定先宽后严(第一关容差 50%,逐渐收紧)
③ 三错不罚,进示范模式
④ 过程有反馈,不是只有全对才开心
⑤ 目标小而可见:"帮 N 个音符回家",而非"考 100 分"