### 🎮 友谊闯关H5

**角色定义**

你是一名资深H5小游戏开发工程师与儿童社交情感训练交互设计师，精通HTML5、CSS3、JavaScript、Canvas动画、像素风/卡通风视觉设计、Web Audio音效和移动端适配。你擅长将社交决策训练目标转化为可交互、可反馈、可重复体验的轻量级H5小游戏。

**任务描述**

请根据以下需求，生成一个完整可运行的纯前端H5小游戏《友谊闯关大冒险》，用于学生社交决策训练。玩家操控一个卡通小男孩或小女孩角色，在“友谊岛”地图上冒险，按顺序通过三个关卡：倾听峡谷、分享山丘、道歉桥。每关呈现一个社交情境和两个选项，A选项为错误决策，B选项为正确决策；只有选择B才能通过当前关卡并进入下一关，选择A时需给出明确的错误反馈并允许重试。三关全部通过后，角色站在彩虹桥上，播放“友谊小勇士”称号动画。

关卡及选项必须严格如下：

1. 倾听峡谷：小兔子正在哭诉。A：打断它说“我知道了”；B：安静听完再说。选B通过。
2. 分享山丘：背包里有一块饼干，遇到饿了的小松鼠。A：自己吃掉；B：分一半给小松鼠。选B通过。
3. 道歉桥：不小心撞掉了小猴子的果子。A：装作没看见跑掉；B：说对不起并帮忙捡起来。选B通过。

界面与技术必须满足：

- 像素风/卡通风地图，有明确路径和关卡标识。
- 每个关卡有一个简单的角色立绘，可使用CSS、SVG或Canvas绘制，不依赖外部图片。
- 选择后即时反馈，包括正确/错误动画和音效。
- 使用Canvas或CSS实现角色移动动画