我如何在一个周日打造音乐游戏（由茶、混乱和AI驱动 🤣🎧🔥）
Source: Dev.to
一切始于星期天上午 7:30。早餐吃了一个煎蛋三明治，喝了一杯 Cardemon Ahmed 茶，我在刷网页时脑中响起一个声音：“做点什么吧”。于是我决定用我的未发布曲目、Expo 和 React Native，做一个音乐驱动的游戏，并为移动端和网页实现倾斜控制。
🔊 音频分析：先扫描，后上传
计划很简单：
- 在本地分析每首曲目
- 提取频段、包络、节拍和 BPM
- 将分析结果保存到数据库，这样游戏运行时就不需要再次分析音频
- 在运行时即时加载几何体
Bolt.new 帮助配置了 Supabase。把项目指向我自己的 Supabase 实例后，迁移自动完成。
一个小脚本（在 AI 的帮助下编写）完成了整个流水线：
- 分析每首曲目并生成几何数据。
- 将几何数据上传到 Supabase。
- 分析完成后，再把原始音频文件上传到 Supabase Storage。
整个过程大约用了两小时，得到了一套可直接使用的关卡库。
🌀 绘制关卡：频率折磨测试
利用分析数据，我塑造了隧道：
- 低音 → 大幅移动
- 踢鼓 → 隧道挤压
- 高音 → 微小抖动
- 安静时段 → 宽阔空间
Bolt.new 的快速 “push‑code‑rebuild‑test” 循环（通过 Expo QR 或网页预览）让我能够快速迭代，直到视觉效果变得有趣。
🎮 游戏逻辑、页面、UI、玩法骨架
隧道形状满意后，我加入了核心玩法组件：
- 主菜单
- 游戏界面
- 计分系统
- 玩家移动与碰撞更新
- 重启逻辑
- 加载界面
- 小幅 UI 调整
随后我切换到 VS Code，以获得更细致的布局控制并实现预加载器。
🧠 在 VS Code 中首次使用多代理
这是我第一次在 VS Code 内部使用多代理工作流。我为不同任务分配了不同的代理：
- 代理 1 – 游戏逻辑
- 代理 2 – 投射物速度与物理
- 代理 3 – UI 间距修复
- 代理 4 – 辅助组件生成
- 代理 5 – 敌人模式设计
结果感觉像是一个小而混乱的开发团队住进了我的编辑器——而且没有咖啡休息时间。
🎨 获取图形：登场 Gemini Nanobanana 🍌✨
因为我不是艺术家，我使用 Gemini Nanobanana 完成以下步骤：
- 生成配色方案。
- 基于配色方案创建素材。
- 导出全部内容。
- 在 Photoshop 中清理素材（裁剪、调整大小、去除背景）。
- 让 VS Code 代理把占位 SVG 替换为新的 PNG。
游戏瞬间变得更加鲜艳，虽然有点霓虹感——正是我喜欢的风格。
⚡ 添加敌人、强化道具、护盾及其他有趣内容
有了图形后，我层叠加入了更多玩法要素：
- 敌人
- 强化道具
- 护盾
- 视觉特效
- 受击反馈
- 大量细小细节
每一次添加都像是 “再来一点”，但它们共同丰富了体验。
🏆 排行榜时间
因为关卡会无限循环，我加入了高分榜和用户资料：
- 使用 Bolt.new 设置 Supabase Auth。
- 调整策略，使用户自动创建并可以更新显示名称。
- 实现一个从 Supabase 读取的排行榜。
在 AI 辅助配置下，设置过程非常快。
🚀 最终构建、部署与就寝
当所有功能都正常时：
- 构建应用。
- 将代码推送到 GitHub。
- 在 GitHub Pages 部署网页版本。
- 在手机上测试并修复小 bug。
22:00 时我已经筋疲力尽但兴奋不已。躺在床上玩了几局，看到自己这奇怪的作品笑了笑，然后入睡。
最后感想
我还能花更多时间打磨吗？当然可以。
但对于仅仅一个星期天的编码来说，结果已经疯狂得让人满意——以好的方式。AI 并没有取代我，而是放大了我的工作流，消除了繁琐任务，让我保持在 “流状态”。这个星期天成了我很久以来最有趣的编码日之一。
Life = good ❤️🎧🚀