英语音标大冒险 🎮

一个专为小学三年级学生设计的英语音标学习小游戏集合，通过趣味互动的方式帮助孩子掌握英语音标。

在线体验

🌐 在线访问: https://boathell.github.io/phonetic-games/phonetic-games.html

或者直接在浏览器中打开 phonetic-games.html 本地文件即可开始游戏。

# 本地启动（可选）
python3 -m http.server 8000
# 然后访问 http://localhost:8000/phonetic-games.html

游戏介绍

🫧 泡泡龙

听单词发音，从三个泡泡中找出正确的音标。点击正确得分，选错扣分，漏掉会扣生命值！

• 操作方式：点击带有音标的泡泡
• 计分规则：连击可获得更高分数
• 通关条件：连续答对 10 题即可通关

🔗 连连看

将左侧的音标与右侧对应的单词进行配对。

• 操作方式：先点击音标，再点击对应单词
• 计分规则：连对可获得分数加成
• 特色功能：配对成功后会朗读单词

✨ 消消乐

找出元音发音相同的两个单词进行消除。

• 操作方式：点击两个音标相同的单词卡片
• 计分规则：成功消除得 20 分，错误扣 5 分
• 辅助功能：可选中单词后点击朗读按钮听发音

🗺️ 音标迷宫

从起点出发，只能走到与目标音标匹配的单词格，走到终点即可通关！

• 操作方式：点击相邻的符合条件的格子移动
• 计分规则：每步得 10 分，通关额外奖励 80 分
• 策略性：需要规划路线，避开错误音标

音标范围

支持以下音标分类，可自由勾选学习范围：

分类	说明
长元音	/ɑ:/ /ɔ:/ /ɜ:/ /i:/ /u:/
短元音	/ʌ/ /ɒ/ /ə/ /ɪ/ /ʊ/ /æ/ /e/
双元音	/ɔɪ/ /aɪ/ /əʊ/ /aʊ/ /ɪə/ /eɪ/ /eə/ /ʊə/
爆破音	/p/ /t/ /k/ /b/ /d/ /g/
摩擦音	/f/ /v/ /s/ /z/ /ʃ/ /ʒ/ /θ/ /ð/ /h/ /r/
鼻音	/m/ /n/ /ŋ/
舌边音	/l/
半元音	/w/ /j/
破擦音	/tr/ /dr/ /tʃ/ /dʒ/ /ts/ /dz/

皮肤系统

通过积累星星可以解锁可爱的蛋仔皮肤：

皮肤	名称	解锁条件
🥚 原味蛋仔	默认皮肤	初始解锁
☁️ 天空蛋仔	蓝色主题	6 星解锁
🌲 森林蛋仔	绿色主题	12 星解锁
🌅 落日蛋仔	橙色主题	20 星解锁
😢 绝望的蛋小黄	特殊造型	28 星解锁
🐟 咸鱼蛋	咸鱼造型	36 星解锁

任务系统

每局游戏会随机分配一个任务，完成后可获得星星奖励：

• 连击任务：连续答对指定次数
• 速度任务：在规定时间内完成指定操作
• 得分任务：达到指定分数
• 消除任务：消除指定数量的配对

技术说明

• 纯前端实现，单 HTML 文件包含所有代码
• 使用 Web Speech API 进行语音朗读
• 使用 localStorage 保存学习进度和皮肤选择
• 响应式设计，支持桌面和移动设备

浏览器兼容性

• Chrome / Edge（推荐）
• Firefox
• Safari

注意：语音朗读功能需要浏览器支持 Web Speech API。

快捷键

按键	功能
1	切换到泡泡龙
2	切换到连连看
3	切换到消消乐
4	切换到音标迷宫
Esc	关闭弹窗

项目结构

.
├── phonetic-games.html    # 主游戏文件（包含 HTML/CSS/JS）
├── README.md              # 项目说明
├── AGENTS.md              # 开发指南
├── .gitignore             # Git 忽略配置
└── .pre-commit-config.yaml # 代码检查配置

开发说明

本项目采用单文件架构，所有代码集中在 phonetic-games.html 中：

• HTML：页面结构和游戏区域
• CSS：样式、动画和响应式布局
• JavaScript：游戏逻辑、状态管理和音频处理

许可证

MIT License

---

祝小朋友们学习愉快！🌟