# 
项目文档：春节金牌大厨 (Spring Festival Master Chef)
## 1. 项目简介
这是一个基于 Web 技术的互动模拟烹饪小游戏。旨在通过游戏化的方式，让用户体验中国春节传统美食（水饺、红烧肉、清蒸鱼、全家福汤）的制作过程。摆脱了枯燥的食谱阅读，用户必须亲自控制火候、添加调料，增加了趣味性和参与感。
## 2. 核心功能
### 2.1 游戏化场景
* **选菜大厅**：展示四道经典年夜饭菜品，包含难度星级和完成状态标记。
* **沉浸式厨房**：模拟真实的灶台环境，包含锅具动画、操作按钮区和状态提示栏。
### 2.2 核心玩法机制 (状态机)
每一道菜都被拆解为严格的步骤序列。用户必须按照正确的逻辑顺序点击操作按钮，否则会导致烹饪失败。
* **示例逻辑（水饺）**：烧水 → 水开下饺子 → 沸腾点凉水 → 熟透捞出 → 装盘。
* **示例逻辑（红烧肉）**：倒油 → 下肉煸炒 → 调色调味 → 加水慢炖 → 大火收汁。
### 2.3 视觉与反馈
* **动态 Emoji**：使用 Emoji 组合（如 `
`）模拟食物在锅中的状态变化。
* **CSS 动画**：
\* \`shake\`：模拟炒菜时的颠锅动作。
\* \`floatUp\`：模拟操作时的特效图标上浮。
* **结果判定**：
\* \*\*成功\*\*：解锁菜品成就，点亮星星。
\* \*\*失败\*\*：弹出趣味性的失败原因（如“锅糊了”），并给出正确提示。
## 3. 技术实现细节
### 3.1 技术栈
* **HTML5**：构建语义化结构。
* **CSS3**：使用 Flexbox/Grid 布局，CSS Variables 管理主题色，Keyframes 实现物理动画。
* **Vanilla JavaScript (ES6+)**：无第三方库依赖，使用原生 JS 处理游戏逻辑。
### 3.2 关键代码结构
* **数据结构 (`recipes` 对象)**：存储所有菜品的名称、步骤文字、正确操作指令 (`valid`) 和失败提示 (`hint`)。
* **场景切换**：通过添加/移除 DOM 元素的 class (`.active`) 来实现单页应用 (SPA) 的流畅切换。
* **事件处理**：统一的 `handleAction(action)` 函数，对比用户输入与当前步骤的预设指令。
## 4. 交互亮点
1. **容错机制**：并非单纯的点击游戏，具有一定的策略性（如需要判断什么时候改小火）。
2. **成就系统**：顶部的计分板 (`已解锁名菜: x/4`) 激励用户完成所有挑战。
3. **即时反馈**：点击任何按钮都有视觉（图标上浮）和逻辑（进度条推进）的双重反馈。
-–
*版本号：v2.0_Interactive*
*开发者：AI Web Expert*