suifeng666

第一个版本的开发文档，由 chatgpt 的 O3 模型进行生成。
# ColdplayCanoodlersPlus MVP开发文档（基础版本）

[一] 项目目标
在网页端实现最小可玩版本，让玩家点击观众席找出情侣并播放短视频。
总包体≤10MB ，移动端可流畅运行。
代码、资源与流程尽可能借助 AI 自动化/加速。

[二] 功能范围（ MVP ）

1. 单一关卡（ Coldplay原始片段观众席）。
2. 点击命中检测：命中情侣 → 播放视频；误点无反馈。
3. 计时成绩：完成时间ms 。
4. 本地排行榜：使用localStorage保存前10成绩。
5. 基础 UI：开始页、游戏页、结果页。
6. 音视频兼容：首触发播放、移动端静音策略。

[三] 技术栈选择
前端框架：Vite+Phaser3+TypeScript 。
构建部署：Vercel（零配置、自动CI ）。
AI辅助：
OpenAIAPI/GPT4o：生成代码片段、注释、提示文本。
SDXL+PixelartDiffusion：批量生成像素观众（可选）。
分析：Plausible自建实例（简单事件埋点）。

[四] AI在开发中的角色

1. 代码生成：使用ChatGPT编写场景、命中逻辑、UI组件草稿。
2. 资产生成：提示"pixel art crowd cheering in stadium topdown"生成占位图；用DALLE或SDXL 。
3. 问题排查：将错误栈复制给GPT获取修复步骤。

[五] 项目目录结构

```
/ 项目根
├─public/ favicon 、manifest
├─assets/
│ ├─crowd/ 观众像素图
│ ├─video/ coldplay_clip.mp4
│ └─data/ levels.json
├─src/
│ ├─main.ts 入口，创建游戏
│ ├─game.ts Phaser配置
│ ├─scenes/ Boot,Menu,Play,Result
│ └─utils/ hitTest.ts,timer.ts
└─vite.config.ts
```

[六] 数据文件示例（ levels.json ）

```
[
{
"id": "coldplay01",
"image": "/assets/crowd/coldplay_a.png",
"video": "/assets/video/coldplay_clip.mp4",
"targets": [{ "x": 432, "y": 188, "r": 30 }]
}
]
```

[七] 任务拆解 & 时间预估（单位：人日）

| 阶段 | 目标 | 任务 | 预计 | AI介入 |
| ------ | ---------------- | -------------------------- | ---------- | --------- |
| 0 环境 | 跑通HelloPhaser | Node/Vite/TS配置 | 0.5 | GPT配置脚本 |
| 1 画面 | 加载观众图，点击打印坐标 | BootScene,PlayScene骨架 | 1 | GPT生成代码 |
| 2 命中 | 判断命中并圈选 | hitTest 、绘制圆环 | 1 | GPT调试算法 |
| 3 视频 | 命中后播放mp4 | DOMoverlay或PhaserVideo | 0.5 | GPT解决兼容 |
| 4 计时 | 计时 & 结果页 | Timerutil,ResultScene | 0.5 | GPTUI文案 |
| 5 排行 | localStorage排行榜 | 排序、存取、展示 | 0.5 | GPT代码改写 |
| 6 部署 | Vercel自动构建 | github→vercel | 0.5 | GPTCI脚本 |
| **合计** | 基础可玩上线 | | **45人日** | 全程辅助 |

[八] 交付物

1. Git仓库（ MITLicense ）。
2. 线上演示URL 。
3. README含快速启动、Prompt示例。
4. 未来迭代清单。

[九] 风险&对策

* 版权：使用像素化+改名处理；视频走YouTubeembed规避包体。
* 移动自动播放：首触发后加载音视频。
* 包体超限：图像WebP压缩、视频<3MB 。

[十] 下一步升级方向（仅列题目）
多关卡、道具系统、Supabase在线排行、社交分享、激励广告、自动 AI生成新关卡。

@HiQuan 哈哈，看破不说破

@tpxcer 不好意思老哥，功能昨天出问题了，还没调试好

你是怎么做到复制出来依然保持字体的，请教下