| --- |
| title: MagicPot - 魔法锅游戏 |
| emoji: 🪄 |
| colorFrom: purple |
| colorTo: pink |
| sdk: static |
| pinned: false |
| license: mit |
| --- |
| |
| # MagicPot - 魔法锅游戏 |
|
|
| 一个卡通手绘风格的语音交互游戏，通过声音控制魔法锅烹饪各种食物！ |
|
|
| ## 游戏特色 |
|
|
| - 🎨 **卡通手绘风格**：温馨可爱的视觉效果 |
| - 🎤 **语音交互**：通过语音命令控制游戏 |
| - 🍳 **魔法烹饪**：AI生成食物和小动物素材 |
| - ✨ **粒子效果**：食物从锅中涌出的动态效果 |
| - 🐾 **动物互动**：小动物会来吃对应的食物 |
| - 🎁 **隐藏彩蛋**：草莓和西瓜的特殊效果 |
|
|
| ## 游戏玩法 |
|
|
| 1. **激活魔法锅**：说出 "cook cook cook pot" 来激活魔法锅 |
| 2. **选择食物**：说出任何食物的英文单词开始烹饪 |
| 3. **AI生成素材**：系统自动生成食物和相关小动物的图片 |
| 4. **食物涌出**：锅盖被顶开，食物如粒子般涌出 |
| 5. **停止烹饪**：说出 "stop stop stop pot" 停止食物产生 |
| 6. **动物出现**：当食物达到一定数量，小动物会从屏幕两侧跑来 |
| 7. **特殊彩蛋**：草莓或西瓜达到一定数量时，小女孩会从右侧出现 |
|
|
| ## 技术栈 |
|
|
| - **前端框架**：HTML5 Canvas + JavaScript |
| - **语音识别**：Web Speech API |
| - **文生图API**：集成AI图像生成服务 |
| - **动画引擎**：自定义粒子系统 |
| - **音频处理**：Web Audio API |
|
|
| ## 项目结构 |
|
|
| ``` |
| MagicPot/ |
| ├── index.html # 主页面 |
| ├── css/ |
| │ └── style.css # 样式文件 |
| ├── js/ |
| │ ├── main.js # 主游戏逻辑 |
| │ ├── voice.js # 语音识别模块 |
| │ ├── pot.js # 魔法锅类 |
| │ ├── particles.js # 粒子系统 |
| │ ├── animals.js # 动物系统 |
| │ └── textToImage.js # 文生图API接口 |
| ├── assets/ |
| │ ├── images/ # 图片资源 |
| │ ├── sounds/ # 音效文件 |
| │ └── fonts/ # 字体文件 |
| └── README.md |
| ``` |
|
|
| ## 安装和运行 |
|
|
| 1. 克隆项目到本地 |
| 2. 使用本地服务器运行（推荐使用 Live Server 或 Python HTTP Server） |
| 3. 在浏览器中打开，允许麦克风权限 |
| 4. 开始游戏！ |
|
|
| ## 开发计划 |
|
|
| - [x] 项目结构搭建 |
| - [x] 语音识别功能 |
| - [x] 魔法锅UI设计 |
| - [x] 文生图API集成 |
| - [x] 粒子系统实现 |
| - [x] 动物生成系统 |
| - [x] 彩蛋功能 |
| - [x] 游戏状态管理 |
|
|
| ## 快速开始 |
|
|
| ### 方法一：使用 Python HTTP 服务器 |
| ```bash |
| # 在项目根目录运行 |
| python -m http.server 8000 |
| # 然后在浏览器中访问 http://localhost:8000 |
| ``` |
|
|
| ### 方法二：使用 Node.js |
| ```bash |
| # 安装依赖 |
| npm install |
| |
| # 启动开发服务器 |
| npm run dev |
| ``` |
|
|
| ### 方法三：直接打开文件 |
| 直接用浏览器打开 `index.html` 文件（某些功能可能受限） |
|
|
| ## 游戏控制 |
|
|
| ### 语音命令 |
| - **"cook cook cook pot"** - 激活魔法锅 |
| - **说出食物名称** - 开始烹饪（如：apple, banana, pizza等） |
| - **"stop stop stop pot"** - 停止食物涌出 |
|
|
| ### 键盘快捷键 |
| - **F12** - 切换调试信息显示 |
| - **F11** - 测试所有音效 |
| - **F10** - 切换音效开关 |
| - **Ctrl+Shift+I** - 配置文生图API密钥 |
| - **ESC** - 关闭帮助窗口 |
|
|
| ### 界面功能 |
| - **🔊 音效按钮** - 点击切换音效开关 |
| - **❓ 帮助按钮** - 点击查看详细的语音命令帮助 |
| - **🎤 语音状态指示器** - 显示当前语音识别状态 |
| - **💬 实时语音显示** - 实时显示用户的语音输入内容 |
| - **📊 性能监控** - 实时显示粒子数、动物数和FPS（烹饪时自动显示） |
|
|
| ## 支持的食物 |
|
|
| ### 水果类 |
| - apple (苹果) 🍎 |
| - banana (香蕉) 🍌 |
| - orange (橙子) 🍊 |
| - strawberry (草莓) 🍓 *彩蛋* |
| - watermelon (西瓜) 🍉 *彩蛋* |
| - grape (葡萄) 🍇 |
|
|
| ### 主食类 |
| - pizza (披萨) 🍕 |
| - burger (汉堡) 🍔 |
| - bread (面包) 🍞 |
| - rice (米饭) 🍚 |
| - noodles (面条) 🍜 |
|
|
| ### 甜点类 |
| - cake (蛋糕) 🍰 *特殊效果* |
| - cookie (饼干) 🍪 |
|
|
| ### 其他 |
| - cheese (奶酪) 🧀 |
| - fish (鱼) 🐟 |
| - chicken (鸡肉) 🍗 |
|
|
| ## 特殊功能 |
|
|
| ### 彩蛋功能 |
| - **草莓/西瓜彩蛋**：当草莓或西瓜数量达到30个时，小女孩会从右侧出现 |
| - **生日蛋糕特效**：制作蛋糕时会有特殊的生日庆祝效果 |
| - **百食庆祝**：制作100个食物时会有烟花庆祝效果 |
|
|
| ### 动物系统 |
| 不同的食物会吸引不同的小动物： |
| - 🍎 苹果 → 🐰 兔子 |
| - 🍌 香蕉 → 🐵 猴子 |
| - 🍊 橙子 → 🐦 小鸟 |
| - 🍓 草莓 → 🐻 熊 |
| - 🍉 西瓜 → 🐘 大象 |
| - 🍕 披萨 → 🐱 猫咪 |
| - 🍔 汉堡 → 🐶 小狗 |
|
|
| ## 技术特性 |
|
|
| ### 语音识别 |
| - 使用 Web Speech API |
| - 支持英文语音识别 |
| - 自动重启和错误处理 |
| - 实时状态显示 |
|
|
| ### 粒子系统 |
| - 食物涌出效果 |
| - 魔法粒子特效 |
| - 蒸汽动画 |
| - 庆祝烟花效果 |
|
|
| ### AI图片生成 |
| - 支持文生图API集成 |
| - 本地缓存机制 |
| - 备用表情符号显示 |
| - 可配置API密钥 |
|
|
| ### 动画效果 |
| - 卡通手绘风格 |
| - 流畅的Canvas动画 |
| - 粒子物理系统 |
| - 动物AI行为 |
|
|
| ### 音效系统 |
| - **程序化音效生成**：使用Web Audio API实时生成音效 |
| - **丰富的音效类型**： |
| - 🪄 魔法激活音效（上升音调带颤音） |
| - 🫧 烹饪冒泡音效（随机频率变化） |
| - 💥 食物弹出音效（短促爆破声） |
| - 🐦 动物出现音效（鸟叫声） |
| - 🔔 小女孩出现音效（闪亮铃声） |
| - 🎺 庆祝音效（三和弦号角声） |
| - 💨 停止音效（风声效果） |
| - **智能音效控制**：可开关、音量控制、随机音调变化 |
| - **性能优化**：预生成音效缓存，避免实时计算 |
|
|
| ### 性能优化 |
| - **内存管理**：智能控制粒子和动物数量上限 |
| - **自动清理**：定期清理过期和无效对象 |
| - **性能监控**：实时显示FPS、粒子数、动物数 |
| - **资源限制**： |
| - 最大粒子数：150个 |
| - 最大动物数：8只 |
| - 最大食物数：100个 |
| - 地面粒子上限：80个 |
|
|
| ## 浏览器兼容性 |
|
|
| ### 推荐浏览器 |
| - Chrome 80+ |
| - Edge 80+ |
| - Firefox 75+ |
| - Safari 14+ |
|
|
| ### 必需功能 |
| - Web Speech API（语音识别） |
| - Canvas 2D API（游戏渲染） |
| - Web Audio API（音效支持） |
| - ES6+ 支持 |
|
|
| ## 故障排除 |
|
|
| ### 语音识别不工作 |
| 1. 检查浏览器是否支持 Web Speech API |
| 2. 确保已允许麦克风权限 |
| 3. 检查网络连接（某些浏览器需要HTTPS） |
|
|
| ### 文生图功能不工作 |
| 1. 按 Ctrl+Shift+I 配置API密钥 |
| 2. 检查API密钥是否有效 |
| 3. 即使没有API，游戏也会使用备用图片正常运行 |
|
|
| ### 性能问题 |
| 1. 按F12查看调试信息 |
| 2. 检查粒子数量是否过多 |
| 3. 尝试刷新页面重置游戏 |
|
|
| ## 开发说明 |
|
|
| ### 项目结构 |
| ``` |
| MagicPot/ |
| ├── index.html # 主页面 |
| ├── css/style.css # 样式文件 |
| ├── js/ # JavaScript模块 |
| │ ├── main.js # 主游戏逻辑 |
| │ ├── voice.js # 语音识别 |
| │ ├── pot.js # 魔法锅类 |
| │ ├── particles.js # 粒子系统 |
| │ ├── animals.js # 动物系统 |
| │ └── textToImage.js # 文生图API |
| ├── assets/ # 资源文件 |
| │ ├── images/ # 图片资源 |
| │ └── sounds/ # 音效文件 |
| └── package.json # 项目配置 |
| ``` |
|
|
| ### 扩展开发 |
| - 添加新食物：在各个模块的映射表中添加新条目 |
| - 添加新动物：扩展 `animals.js` 中的动物类型 |
| - 添加新特效：在 `particles.js` 中创建新的粒子类型 |
| - 添加音效：在相应的事件中调用音频播放函数 |
|
|
| ## 许可证 |
|
|
| MIT License - 详见 LICENSE 文件 |
|
|
