用 Claude AI 从零开发了一个完整的 Coldplay 主题游戏 - 全程技术分享

[suifeng666]

这是根据 Coldplay Canoodlers 做的一款升级版 Coldplay Canoodlers Plus ，增加了一些关卡。

前言

大家好，我是一名开发者萌新，最近和 Claude AI 协作完成了一个完整的网页游戏开发项目。整个过程非常有趣，想和 V2EX 的朋友们分享一下这次 AI 协作开发的经历和技术细节。

游戏简介：
- 名称：Coldplay Canoodlers Plus
- 类型：观察类游戏，在演唱会人群中找出情侣
- 技术栈：TypeScript + Phaser 3 + Vite
- 特色：单 HTML 文件打包，支持 iframe 嵌入，双语言支持
- 体验网址： https://coldplaycanoodlersgame.com/coldplay-canoodlers-plus
- 多语言：右上角提供了中英双语。

🛠️ 技术架构

核心技术选型

前端框架：Phaser 3.70 (游戏引擎)
开发语言：TypeScript 5.3.3
构建工具：Vite 7.0.5 + vite-plugin-singlefile
打包方式：单 HTML 文件 (13.4MB)
资源处理：Base64 内联 + Blob URL 转换

项目结构

src/
├── scenes/ # 游戏场景
├── gameObjects/ # 游戏对象
├── config/ # 配置文件
├── utils/ # 工具函数
└── assets/ # 资源文件

🤖 AI 协作开发过程

第一阶段：需求分析与技术选型

我的需求： 开发一个 Coldplay 主题的找情侣游戏

Claude 的建议：
1. 选择 Phaser 3 作为游戏引擎（轻量级，适合网页游戏）
2. 使用 TypeScript 提高代码质量
3. 采用模块化场景管理
4. 考虑单文件打包便于分享

这个阶段 Claude 帮我制定了完整的技术方案，包括目录结构、开发规范等。

第二阶段：资源生成与处理

这是最有趣的部分，Claude 帮我生成了所有游戏资源：

1. 像素风格图像生成
// Claude 生成的像素艺术代码示例
function generateCrowd(width: number, height: number): string {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d')!;
canvas.width = width;
canvas.height = height;

// 生成观众席背景
for (let row = 0; row < rows; row++) {
for (let seat = 0; seat < seatsPerRow; seat++) {
const personColor = colors[Math.floor(Math.random() *
colors.length)];
// 绘制人物像素图...
}
}

return canvas.toDataURL();
}

2. 音频资源生成
Claude 还帮我生成了游戏音效，虽然是合成的简单音调，但完全满足游戏需求。

第三阶段：核心游戏逻辑实现

创新的鼠标悬停机制：
// 核心交互逻辑
private setupInteractions(interactiveArea: Rectangle): void {
interactiveArea.on('pointerover', () => {
if (!this.isRevealed) {
this.showRevealBox(); // 显示 60x60 透明区域
}
});

interactiveArea.on('pointermove', (pointer: Pointer) => {
if (pointer.isDown && !this.isRevealed) {
this.showRevealBox(); // 支持触屏拖动
}
});
}

难度递增算法：
// 每关目标数量 = 3 + (关卡-1) × 5
init(data: GameData): void {
this.totalCouples = 3 + (this.currentLevel - 1) * 5;
this.timeRemaining = 60; // 固定 60 秒
}

第四阶段：技术难题解决

开发过程中遇到了几个技术挑战，Claude 都帮我一一解决：

1. CORS 问题
// Base64 转 Blob URL 解决方案
function base64ToBlob(base64: string, mimeType: string): string {
const base64Data = base64.split(',')[1];
const byteCharacters = atob(base64Data);
const byteArray = new Uint8Array(byteCharacters.length);

for (let i = 0; i < byteCharacters.length; i++) {
byteArray[i] = byteCharacters.charCodeAt(i);
}

const blob = new Blob([byteArray], { type: mimeType });
return URL.createObjectURL(blob);
}

2. TypeScript 类型错误
// 解决继承体系不一致问题
private playErrorAnimation(distractor: Couple | RealCouple): void {
// 统一处理不同基类的游戏对象
}

3. 移动端适配
/* 响应式设计 */
@media (max-width: 768px) {
body {
touch-action: pan-x pan-y;
}
}

/* iframe 兼容性 */
body.iframe-mode {
height: 800px;
width: 1200px;
}

第五阶段：国际化与优化

多语言支持：
export class LanguageManager {
private static currentLanguage: Language = 'en'; // 默认英文

static getText(key: keyof LanguageTexts): string {
return LANGUAGE_TEXTS[this.currentLanguage][key];
}
}

性能优化：
- 资源预加载和内存管理
- 事件监听器正确绑定/解绑
- Phaser 对象生命周期管理

🎯 AI 协作的优势与感悟

优势

1. 快速原型开发：从想法到可玩原型只用了几个小时
2. 全栈能力：Claude 既能写代码又能生成资源
3. 问题解决能力：遇到 bug 能快速定位和修复
4. 文档生成：自动生成了完整的攻略指南

挑战

1. 上下文限制：长期开发需要多次对话
2. 创意局限：AI 更适合执行明确的技术任务
3. 调试过程：复杂 bug 需要人工介入

最佳实践

1. 明确需求：给 AI 详细的技术规格
2. 模块化开发：分阶段完成，便于管理
3. 版本控制：及时保存重要节点的代码
4. 测试验证：每个功能都要实际测试

📊 最终成果

- 代码行数：约 2000 行 TypeScript
- 文件大小：13.4MB (压缩后 9.3MB)
- 开发时间：约 3 天(断断续续)
- 功能完整度：95%以上

技术特性：
- ✅ 单 HTML 文件，无外部依赖
- ✅ 支持 iframe 嵌入
- ✅ 移动端适配
- ✅ 双语言支持
- ✅ 本地存储功能
- ✅ 响应式设计

🎮 体验地址： https://coldplaycanoodlersgame.com/coldplay-canoodlers-plus

游戏支持直接在浏览器中运行，也可以通过 iframe 嵌入到其他网站。

💭 总结

这次 AI 协作开发的经历让我深刻体会到：

1. AI 是优秀的编程助手：在明确需求的前提下，能够快速实现功能
2. 人机协作是趋势：发挥各自优势，效率远超单独开发
3. 技术门槛降低：即使不是游戏开发专家，也能做出不错的作品

对于 V2EX 的朋友们，如果你们也想尝试 AI 协作开发，建议：
- 选择熟悉的技术栈
- 准备详细的需求文档
- 分模块逐步实现
- 保持代码质量标准

🤔 讨论

想听听大家对 AI 协作开发的看法：
1. 你们有类似的 AI 协作经验吗？
2. 对于游戏开发，还有哪些可以优化的点？
3. 单 HTML 文件打包这种方式实用吗？
4. 如果有体验不好的或者有 bug ，欢迎提出！

期待和大家交流！

---
PS:
这个项目让我对 AI 的能力有了全新认识，Claude 在技术问题解决上的表现真的超出
预期。如果大家对具体的技术实现细节感兴趣，我可以开源部分代码供学习参考。

[suifeng666]

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

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

[二] 功能范围（ MVP ）

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

[三] 技术栈选择
• 前端框架：Vite + Phaser 3 + TypeScript 。
• 构建部署：Vercel （零配置、自动 CI ）。
• AI 辅助：
– OpenAI API / GPT‑4o：生成代码片段、注释、提示文本。
– SDXL + Pixel‑art Diffusion：批量生成像素观众（可选）。
• 分析：Plausible 自建实例（简单事件埋点）。

[四] AI 在开发中的角色

1. 代码生成：使用 ChatGPT 编写场景、命中逻辑、UI 组件草稿。
2. 资产生成：提示 "pixel art crowd cheering in stadium top‑down" 生成占位图；用 DALL·E 或 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": "coldplay‑01",
"image": "/assets/crowd/coldplay_a.png",
"video": "/assets/video/coldplay_clip.mp4",
"targets": [{ "x": 432, "y": 188, "r": 30 }]
}
]
```

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

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

[八] 交付物

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

[九] 风险&对策

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

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