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

这是根据 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 在技术问题解决上的表现真的超出
预期。如果大家对具体的技术实现细节感兴趣，我可以开源部分代码供学习参考。