三栏式响应式布局：

• 🟥 左侧 (2/3)：游戏区域（红色边框）

  • 800x800 Canvas 画布
  • 可爱的小蛇造型
  • 彩色文字蛇身

• 🟡 右上 (1/4)：词汇收集盒（黄色边框）

  • 已收集词汇列表（彩色徽章）
  • 当前需要收集的词汇（彩色徽章）
  • AI 灵感闪现（紫色背景）

• 🟢 右中 (1/4)：AI 诗歌创作（蓝色边框）

  • 诗歌展示区域
  • 重新创作诗歌按钮

• 🟢 右下 (2/4)：AI 图像创作（绿色边框）

  • 生成图片展示
  • 开始新的创作按钮

32种词汇颜色映射：

• 🌈 每个词汇都有独特的颜色
• 📝 颜色基于词汇在词汇库中的索引
• 🔄 32种颜色循环使用
• 🎯 同一个词汇始终是同一颜色

颜色示例：

词汇	颜色	色值
月光	红色	#ef4444
星辰	橙色	#f97316
山川	黄色	#f59e0b
流水	绿色	#10b981
云雾	青色	#06b6d4
晨曦	蓝色	#3b82f6
清风	紫色	#8b5cf6
梦境	粉色	#a855f7

... 等共 32 种颜色

蛇头设计：

• 🟢 绿色圆形蛇头
• 👀 可爱的眼睛（白色眼眶 + 黑色瞳孔 + 高光）
• ✨ 渐变绿色效果（#4ade80 → #22c55e）
• 🌟 发光效果（shadowBlur: 15）

蛇身设计：

• 📝 由吃到的词汇组成
• 🎨 每个词汇显示其对应颜色
• ✨ 彩色发光效果（shadowBlur: 10）
• 🔤 白色文字，彩色背景发光

吃到词汇时的多重特效：

• 360度旋转光环
• 8个星星点旋转向外飞散
• 500ms 动画时长
• 颜色 = 词汇颜色

• 20个彩色粒子从食物位置爆发
• 向上偏移 + 重力下落
• 粒子颜色 = 词汇颜色
• 60帧生命周期

• 新词汇加入蛇身
• 文字颜色 = 词汇颜色
• 文字发光 = 词汇颜色

• 词汇徽章背景色 = 词汇颜色
• 边框颜色 = 词汇颜色的半透明版本
• 白色文字，彩色背景

即时词预览功能：

• 📝 每吃到词汇立即调用AI API
• 💫 显示"AI 灵感闪现"碎片句子
• 🎨 使用最近4个词汇生成短诗
• 🟣 紫色背景，突出AI创作氛围
• ⚡ 动态更新，玩家参与创作感

灵感展示位置：

• 📋 在右侧"词汇收集"区
• 🟣 紫色背景卡片
• 💫 灵感文字实时更新

基本玩法：

• ⌨️ 方向键或 WASD 控制蛇移动
• 🎯 收集8个词汇触发AI创作
• ⚡ 初始速度 300ms，每次吃食物加速10ms
• 🏃 最快速度 150ms
• 💥 碰撞游戏结束

游戏状态流转：

menu → playing → poetry-generating → image-generating → completed
                            ↓ (点击重新创作)
                  completed → image-generating → completed

自动生成流程：

1. 收集8个词汇后自动触发
2. 🎭 调用 AI 生成诗歌 API（使用 z-ai-web-dev-sdk）
3. 📝 显示生成的完整诗歌
4. 🔄 提供"重新创作诗歌"按钮
5. ✨ 使用相同词汇重新混合创作

诗歌展示：

• 📖 蓝色边框卡片
• 📝 滚动区域显示长诗
• 🔄 刷新按钮重新创作

自动生成流程：

1. 诗歌生成完成后自动触发
2. 🎨 调用 AI 图像生成 API（使用 z-ai-web-dev-sdk）
3. 🖼️ 显示生成的配图
4. 🌉 绿色加载动画效果
5. ✅ 完成状态显示"开始新的创作"按钮

图像展示：

• 🖼️ 绿色边框卡片
• 🎨 完整图片自适应显示
• 🔄 重新创作诗歌时自动更新图片

Canvas 绘制层级：

1. 🎨 深蓝背景 (#1a1a2e)
2. 📐 淡紫网格线 (#252540)
3. 🎆 烟花粒子特效（活跃的）
4. ✨ 吃球特效（活跃的）
5. 🌟 食物发光圆球（粉色）
6. 🐍 蛇头（圆形 + 眼睛）
7. 📝 蛇身文字（彩色词汇）

视觉冲击力：

• 🌈 32种词汇颜色，丰富多彩
• 🎆 烟花粒子爆发，华丽特效
• ✨ 吃球光环扩散，闪烁效果
• 💫 发光效果，霓虹灯质感
• 📝 文字在屏幕上游走，独特体验

流畅体验：

• 🎬 requestAnimationFrame 流畅动画
• ⚡ 实时 AI 反馈，无需等待
• 🎨 渐变过渡，视觉平滑
• 📊 状态管理清晰，逻辑严谨
• 🎮 响应式设计，适配不同屏幕

技术栈：

• ⚛️ Next.js 15 (App Router)
• ⚛️ React 18 (Hooks: useState, useEffect, useCallback, useRef)
• 🎨 Tailwind CSS (UI 样式)
• 🎨 shadcn/ui (组件库)
• 🎨 HTML5 Canvas (游戏渲染)
• 🤖 AI SDK (z-ai-web-dev-sdk)

性能优化：

• 🎬 requestAnimationFrame 流畅动画
• 📊 useEffect 依赖优化，减少重渲染
• 🔄 useCallback 缓存函数
• 🎨 Canvas 2D 上下文高效绘制
• ⚡ 特效生命周期自动清理

标准游戏流程：

1. 点击"开始创作"
   ↓
2. 蛇开始移动（绿色圆形蛇头）
   ↓
3. 追逐"月光"（粉色发光圆球）
   ↓
4. 吃到"月光"
   - 红色烟花 + 红色光环 + 红色星星
   - 蛇身变成"月光"（红色文字）
   - 右侧显示"AI 灵感闪现"
   - 右侧"已收集词汇"显示"1. 月光"（红色徽章）
   ↓
5. 追逐"星辰"（橙色发光圆球）
   ↓
6. 吃到"星辰"
   - 橙色烟花 + 橙色光环 + 橙色星星
   - 蛇身追加"星辰"（橙色文字）
   - AI 灵感更新
   ↓
7. ... 继续收集词汇
   ↓
8. 收集8个词汇
   ↓
9. 游戏自动停止
   ↓
10. 显示"AI 正在创作诗歌..."（蓝色加载）
    ↓
11. 生成完整诗歌，显示在右侧
    ↓
12. 显示"AI 正在绘制画作..."（绿色加载）
    ↓
13. 生成配图，显示在右侧
    ↓
14. 游戏状态 = completed
    ↓
15. 点击"重新创作诗歌"
    - 只更新诗歌内容
    - 清空旧图片
    - 重新生成图片
    - 游戏保持停止状态
    ↓
16. 点击"开始新的创作"
    - 重置所有状态
    - 重新开始游戏

1. 独特的文字蛇身：蛇身由词汇组成，文字在屏幕上游走
2. 完整的彩色系统：32种颜色，词汇、特效、徽章完全统一
3. AI 实时参与感：每收集词汇就有AI灵感反馈
4. 华丽的视觉特效：烟花、光环、星星多重特效
5. 可爱的小蛇造型：绿色圆形蛇头，带眼睛和高光
6. 创新的布局设计：三栏式布局，功能分区明确
7. 流畅的游戏体验：实时反馈，无需手动刷新
8. 完整的创作流程：收集 → 诗歌 → 图像 自动流转
9. 可重新创作的机制：使用相同词汇重新混合
10. 响应式界面：适配不同屏幕尺寸

游戏开始 (menu)
  ↓
点击"开始创作"
  ↓
游戏进行 (playing)
  ↓
收集词汇 (0 → 8)
  ↓
生成诗歌 (poetry-generating)
  ↓
生成图像 (image-generating)
  ↓
完成 (completed)
  ↓
点击"重新创作诗歌"
  ↓
生成图像 (image-generating)
  ↓
完成 (completed)
  ↓
点击"开始新的创作"
  ↓
回到游戏开始 (menu)

粒子运动轨迹：

• 所有20个粒子 = 同一颜色
• 粒子爆发 = 词汇颜色
• 粒子运动 = 词汇颜色
• 粒子消失 = 词汇颜色（透明度渐变）

颜色透明度公式：

粒子从实心到完全透明
const life = 60 // 粒子生命周期
const alpha = (life / 60) * 255
const hexAlpha = Math.floor(alpha).toString(16).padStart(2, '0')
const color = `${particle.color}${hexAlpha}`

✅ 独创性的文字蛇身设计 ✅ 完整的32色彩色词汇系统 ✅ AI 实时灵感反馈机制 ✅ 华丽的多重视觉特效 ✅ 流畅的动画体验 ✅ 清晰的三栏式布局 ✅ 完整的 AI 创作流程 ✅ 优秀的用户体验 ✅ 完美的状态管理 ✅ 高效的代码实现

---