README.md

---
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 文件