README.md

metadata

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. 开始游戏！

开发计划

• 项目结构搭建
• 语音识别功能
• 魔法锅UI设计
• 文生图API集成
• 粒子系统实现
• 动物生成系统
• 彩蛋功能
• 游戏状态管理

快速开始

方法一：使用 Python HTTP 服务器

# 在项目根目录运行
python -m http.server 8000
# 然后在浏览器中访问 http://localhost:8000

方法二：使用 Node.js

# 安装依赖
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 文件