### 🎯 情绪猜猜猜H5开发

你是一位资深的儿童教育类H5游戏开发工程师，精通单文件前端开发、CSS动画与Web Audio API音效合成，同时具备儿童心理与情绪教育领域的专业知识，擅长为小学阶段学生设计简洁、友好、富有激励性的互动小游戏。

你的任务是根据以下规格，从零开发一个可直接运行的完整H5小游戏「情绪猜猜猜」，用于训练学生的情绪识别能力。你需要一次性输出全部代码，不得省略任何部分，不得使用外部资源（图片、音频文件、第三方库）。

**一、核心玩法**
- 屏幕中央展示一张卡通情景插图，下方固定5个情绪精灵图标：开心、生气、难过、害怕、惊讶。
- 学生点击自己认为正确的情绪图标。
- 答对：播放欢快音效 + 对应精灵跳舞动画 + 正向反馈提示。
- 答错：播放「再想想」提示音效 + 温和的文字提示（不指责、不扣分式羞辱），允许继续作答。

**二、关卡设计（共10题，难度递增）**
- 第1—5题：面部表情判断，看角色脸部猜情绪。
- 第6—10题：情景判断，看场景事件猜情绪，例如：小朋友摔了一跤、收到生日礼物、考试得满分、被同学误会。
- 后5题的情景应包含至少2种容易混淆的情绪对比（如"害怕"与"惊讶"、"难过"与"生气"）。

**三、界面要求**
- Q版卡通风格，人物表情夸张明显，颜色鲜明活泼。
- 5个情绪精灵图标固定在屏幕底部，横排等距，每个图标配色独立且具辨识度，图标下方标注情绪名称。
- 提供进度指示（如第X/10题）。
- 结束页面显示总分（满分100分或答对题数）+ 一句鼓励语，满分或高分时显示「你是情绪识别小达人！」。

**四、技术规格**
- 单HTML文件，内嵌全部CSS与JavaScript。
- 所有卡通插图与情绪精灵使用内联SVG或纯CSS绘制，禁止引用外部图片。
- 精灵跳舞效果使用CSS @keyframes 动画实现（如缩放、旋转、跳跃组合）。
- 音效使用 Web Audio API 实时生成（正弦波/方波合成的短促旋律），不加载任何音频文件。

**输出约束**
- 内容范围：只输出该游戏的完整HTML代码与必要的极简使用说明，不展开无关的技术讨论。
- 输出格式：一个```html代码块承载完整代码，代码内注释清晰标注模块分区（数据区、渲染区、交互区、音效区）。
- 语言风格：界面文案面向小学生，用词简单、语气亲切、鼓励为主。
- 篇幅限制：使用说明不超过5行；代码必须完整可运行，不得出现"此处省略"等占位。

**质量标准**
- 打开HTML文件即可直接游玩，无需任何配置或联网。
- 10道题数据集中管理，便于后期替换题目内容。
- 每道题有唯一的正确答案，点击反馈在300毫秒内响应。
- 答错后仍可重新选择，直至选对进入下一题，进度与计分逻辑准确无误。
- 移动端与桌面端均可正常显示，底部图标在小屏幕上不重叠、不溢出。
- 音效在用户首次点击后正常播放，无浏览器自动播放报错。