<!-- title: Claude Code游戏开发：原型到可玩交付 -->

# Claude Code游戏开发：从原型到可玩交付全链路实战

> **学习目标**：掌握使用Claude Code独立完成一款HTML5游戏的全流程——从概念设计、项目搭建、核心玩法编码、资源管线、到测试发布。读完本教程，你将能在一个下午内交付一款可玩的浏览器游戏。
>
> **适用人群**：有基础JavaScript经验、对游戏开发感兴趣的开发者；已有Claude Code使用经验、想探索游戏方向的AI编程用户。

---

## 一、为什么选择Claude Code做游戏

2026年4月，开源项目[Claude Code Game Studios](https://github.com/Donchitos/Claude-Code-Game-Studios/)引爆社区——它用49个专项Agent、72个工作流Skill，将单次Claude Code会话转变为一个完整的游戏工作室。同一时期，开发者用Claude Code在一天内构建了3款HTML5 Canvas游戏，从太空射击到平台跳跃，全部可玩。

Claude Code在游戏开发场景的核心优势：

| 能力 | 传统方式 | Claude Code方式 |
|------|---------|----------------|
| 游戏循环编写 | 手写requestAnimationFrame、状态机 | 一句Prompt生成完整Game Loop |
| 碰撞检测 | 查文档、手写AABB/SAT算法 | 直接生成优化过的碰撞系统 |
| 资源处理 | 手动压缩、生成精灵图 | 调用Skill自动管线 |
| 跨文件重构 | 害怕改崩、手动追踪依赖 | 全项目理解、一次性重构 |
| 调试渲染 | console.log坐标值 | Playwright截图+视觉快照 |

---

## 二、环境准备

### 2.1 必备工具

```bash
# Claude Code CLI（确保最新版）
claude --version  # 需要 >= 1.0.40

# Node.js 环境
node --version    # >= 20.x

# 本地HTTP服务器（用于测试）
npm install -g http-server

# 可选：Phaser 3（2D游戏框架）
mkdir my-game && cd my-game
npm init -y
npm install phaser
```

### 2.2 安装游戏开发Skill

Claude Code的游戏开发生态已经非常成熟，多个社区Skill可以直接安装：

```bash
# 进入Claude Code交互模式
claude

# 安装Web游戏开发Skill（内置Playwright测试）
/install-skill web-game-developer

# 安装游戏资源生成Skill（精灵图、像素画）
/install-skill game-asset-sprite-generator

# 可选：安装Phaser专项Skill
/install-skill phaser-game-development
```

### 2.3 项目目录结构

Claude Code对项目结构敏感。游戏项目推荐以下布局：

```
my-game/
├── CLAUDE.md              # 项目级指令（关键！）
├── index.html             # 入口页面
├── src/
│   ├── main.js            # 游戏入口
│   ├── scenes/
│   │   ├── BootScene.js   # 加载场景
│   │   ├── MenuScene.js   # 主菜单
│   │   └── GameScene.js   # 游戏主场景
│   ├── entities/
│   │   ├── Player.js      # 玩家实体
│   │   └── Enemy.js       # 敌人实体
│   ├── systems/
│   │   ├── CollisionSystem.js
│   │   └── ScoreSystem.js
│   └── utils/
│       └── helpers.js
├── assets/
│   ├── sprites/
│   ├── audio/
│   └── maps/
├── tests/
│   └── game.test.js
└── package.json
```

---

## 三、CLAUDE.md：游戏项目的灵魂配置

CLAUDE.md是Claude Code理解你游戏项目的关键。针对游戏开发，它需要包含特定的约束信息。

```markdown
# My Awesome Game

## 项目概述
一款使用Phaser 3开发的2D太空射击游戏，目标平台为现代浏览器。

## 技术栈
- Phaser 3.80+
- ES Modules（无打包工具，直接在浏览器运行）
- 原生JavaScript（不用TypeScript）

## 游戏架构
- 使用Phaser Scene系统管理游戏状态
- 实体使用Phaser内置Physics（Arcade Physics）
- 分数系统使用事件驱动模式

## 代码规范
- 每个Scene一个文件，放在src/scenes/下
- 实体类继承Phaser.GameObjects.Sprite
- 坐标系：左上角(0,0)，Y轴向下
- 碰撞检测使用Arcade Physics的overlap/collide

## 性能约束
- 目标帧率：60fps
- 同屏精灵上限：200
- 单张精灵图不超过256x256
- 音效使用Web Audio API

## 禁止事项
- 不要使用Phaser 2的API
- 不要引入构建工具（Webpack/Vite）
- 不要使用class私有字段语法（#field）
```

**为什么这样写？** 游戏开发中，坐标系约定、物理引擎选择、性能指标这些信息如果不写在CLAUDE.md里，Claude Code每次都会"猜"——可能用错坐标系、选错物理引擎、生成性能不达标的代码。

---

## 四、实战：30分钟构建太空射击游戏

### 4.1 第一步：生成游戏骨架

```bash
claude -p "根据CLAUDE.md中的技术栈，生成一个Phaser 3太空射击游戏的完整骨架：
1. index.html加载ES Module
2. src/main.js创建Phaser.Game实例，注册BootScene/MenuScene/GameScene
3. BootScene加载资源并显示进度条
4. MenuScene显示标题和开始按钮
5. GameScene初始化物理引擎、创建星空背景滚动
请确保所有文件都完整可运行。"
```

**预期输出**：Claude Code会生成5个文件，每个文件约50-100行。`index.html`会正确配置`<script type="module">`，`main.js`会设置Phaser配置。

**常见问题**：

| 问题 | 原因 | 解决方案 |
|------|------|---------|
| `Phaser is not defined` | 未正确引入Phaser | 在index.html中用`<script>`标签全局加载Phaser CDN |
| 场景切换黑屏 | BootScene未调用`this.scene.start()` | 检查Scene的`create()`方法 |
| ES Module跨域错误 | 直接用file://打开HTML | 使用`http-server`启动本地服务 |

### 4.2 第二步：实现玩家控制与射击

进入交互模式，逐步构建玩法：

```
claude
> 在GameScene中实现玩家飞船控制：
> 1. 飞船在屏幕底部，可用方向键/WASD移动
> 2. 飞船面朝上，不能移出屏幕边界
> 3. 按空格键发射子弹，子弹向上飞行
> 4. 子弹离开屏幕后自动回收（对象池）
> 5. 射击间隔200ms，按住空格连射
```

Claude Code会生成`src/entities/Player.js`，包含完整的输入处理和对象池。关键代码片段：

```javascript
// src/entities/Player.js
export class Player extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'player');
        scene.add.existing(this);
        scene.physics.add.existing(this);
        this.lastShot = 0;
        this.bullets = scene.physics.add.group({
            classType: Phaser.GameObjects.Image,
            maxSize: 30,
            runChildUpdate: true
        });
    }

    update(time, delta) {
        const speed = 300;
        const cursors = this.scene.cursors;
        const keys = this.scene.keys;

        if (cursors.left.isDown || keys.A.isDown) {
            this.body.setVelocityX(-speed);
        } else if (cursors.right.isDown || keys.D.isDown) {
            this.body.setVelocityX(speed);
        } else {
            this.body.setVelocityX(0);
        }

        // 射击逻辑（对象池复用）
        if (keys.SPACE.isDown && time > this.lastShot + 200) {
            const bullet = this.bullets.get(this.x, this.y - 20, 'bullet');
            if (bullet) {
                bullet.setActive(true);
                bullet.setVisible(true);
                bullet.body.setVelocityY(-600);
                this.lastShot = time;
            }
        }

        // 子弹回收
        this.bullets.getChildren().forEach(b => {
            if (b.active && b.y < -10) {
                this.bullets.killAndHide(b);
            }
        });
    }
}
```

### 4.3 第三步：敌人系统与波次生成

```
> 现在添加敌人系统：
> 1. 创建Enemy类，从屏幕顶部随机位置生成
> 2. 三种敌人类型：小型(快速低血)、中型(中速中血)、大型(慢速高血)
> 3. 波次系统：每波难度递增（敌人数量+速度+血量）
> 4. 波次间有3秒倒计时提示
> 请遵循ECS模式，将数据与逻辑分离
```

Claude Code生成的波次配置：

```javascript
// src/systems/WaveSystem.js
export const ENEMY_TYPES = {
    scout:  { hp: 1, speed: 200, score: 100, frame: 'enemy-small' },
    fighter:{ hp: 3, speed: 120, score: 250, frame: 'enemy-medium' },
    cruiser:{ hp: 8, speed: 60,  score: 500, frame: 'enemy-large' }
};

export class WaveSystem {
    constructor(scene) {
        this.scene = scene;
        this.wave = 0;
        this.waveConfig = this.generateWaveConfig();
    }

    generateWaveConfig() {
        this.wave++;
        return {
            scout:   Math.floor(3 + this.wave * 2),
            fighter: Math.max(0, Math.floor(this.wave * 1.5 - 2)),
            cruiser: Math.max(0, Math.floor(this.wave * 0.5 - 1)),
            speedMultiplier: 1 + this.wave * 0.1,
            hpMultiplier: 1 + this.wave * 0.15
        };
    }

    spawnWave() {
        const config = this.waveConfig;
        const enemies = [];
        for (const [type, count] of Object.entries(config)) {
            if (count <= 0) continue;
            for (let i = 0; i < count; i++) {
                const delay = Phaser.Math.Between(0, 3000);
                this.scene.time.delayedCall(delay, () => {
                    const template = ENEMY_TYPES[type];
                    const x = Phaser.Math.Between(40, 760);
                    enemies.push(this.createEnemy(type, template, x));
                });
            }
        }
        return enemies;
    }
}
```

### 4.4 第四步：碰撞、分数与特效

```
> 添加完整的游戏反馈系统：
> 1. 子弹与敌人碰撞：敌人扣血、子弹销毁、受击闪烁
> 2. 敌人被消灭：爆炸粒子特效 + 分数飘字
> 3. 玩家与敌人碰撞：玩家死亡、屏幕震动、游戏结束
> 4. HUD显示：当前分数、波次、生命值
> 使用Phaser内置粒子系统和Tween动画
```

碰撞系统核心逻辑：

```javascript
// src/systems/CollisionSystem.js
export class CollisionSystem {
    constructor(scene, player, waveSystem, scoreSystem) {
        this.scene = scene;
        this.setupCollisions(player, waveSystem, scoreSystem);
    }

    setupCollisions(player, waveSystem, scoreSystem) {
        // 子弹 vs 敌人
        this.scene.physics.add.overlap(
            player.bullets,
            waveSystem.enemyGroup,
            (bullet, enemy) => {
                this.bulletHitEnemy(bullet, enemy, scoreSystem);
            }
        );

        // 敌人 vs 玩家
        this.scene.physics.add.overlap(
            player,
            waveSystem.enemyGroup,
            (_, enemy) => {
                this.enemyHitPlayer(player, enemy);
            }
        );
    }

    bulletHitEnemy(bullet, enemy, scoreSystem) {
        player.bullets.killAndHide(bullet);
        enemy.hp--;

        // 受击闪烁
        this.scene.tweens.add({
            targets: enemy,
            alpha: 0.3,
            duration: 50,
            yoyo: true
        });

        if (enemy.hp <= 0) {
            this.spawnExplosion(enemy.x, enemy.y);
            scoreSystem.addScore(enemy.scoreValue, enemy.x, enemy.y);
            enemy.destroy();
        }
    }
}
```

---

## 五、资源管线：让Claude Code管理游戏素材

游戏开发最大的痛点之一是资源处理。Claude Code通过Skill和脚本自动化这一流程。

### 5.1 程序化生成占位资源

在游戏原型阶段，不需要美工资源。用Claude Code直接生成：

```
> 为我的太空射击游戏生成所有占位资源：
> 1. 用Canvas API绘制32x32的玩家飞船（蓝色三角形+引擎光效）
> 2. 三种敌人精灵（红/橙/紫色飞船轮廓）
> 3. 子弹精灵（4x12发光弹丸）
> 4. 星空背景tile（64x64，深蓝渐变+白色星点）
> 5. 爆炸动画帧（8帧，32x32橙色扩展圆）
> 输出为PNG文件到assets/sprites/目录
```

Claude Code会生成一个Node.js脚本，使用Canvas API绘制所有资源：

```javascript
// scripts/generate-assets.mjs
import { createCanvas } from 'canvas';
import fs from 'fs';

function drawPlayerShip() {
    const canvas = createCanvas(32, 32);
    const ctx = canvas.getContext('2d');

    // 飞船主体
    ctx.fillStyle = '#4488ff';
    ctx.beginPath();
    ctx.moveTo(16, 2);
    ctx.lineTo(28, 28);
    ctx.lineTo(16, 22);
    ctx.lineTo(4, 28);
    ctx.closePath();
    ctx.fill();

    // 引擎光效
    ctx.fillStyle = '#ffaa00';
    ctx.beginPath();
    ctx.moveTo(10, 28);
    ctx.lineTo(16, 32);
    ctx.lineTo(22, 28);
    ctx.closePath();
    ctx.fill();

    fs.writeFileSync('assets/sprites/player.png', canvas.toBuffer('image/png'));
}

// ... 其他资源生成函数
drawPlayerShip();
```

### 5.2 游戏资源管线自动化

安装Game Asset Pipeline Skill后，可以建立自动化管线：

```bash
# 触发资源优化管线
claude -p "运行游戏资源管线：
1. 扫描assets/sprites/下所有PNG，压缩到85%质量
2. 检查精灵图尺寸是否为2的幂次方
3. 生成spritesheet.json（帧动画描述文件）
4. 音效文件转换为Web Audio兼容格式
5. 输出资源清单到assets/manifest.json"
```

---

## 六、游戏测试：Playwright视觉验证

Claude Code最强大的游戏测试能力是通过Playwright进行视觉验证。

### 6.1 自动化游戏测试脚本

```javascript
// tests/game-visual.test.js
import { test, expect } from '@playwright/test';

test('游戏启动并显示主菜单', async ({ page }) => {
    await page.goto('http://localhost:8080');
    await page.waitForTimeout(2000); // 等待Phaser加载

    // 截图验证菜单渲染
    await expect(page).toHaveScreenshot('menu.png', {
        maxDiffPixelRatio: 0.05
    });
});

test('点击开始后进入游戏场景', async ({ page }) => {
    await page.goto('http://localhost:8080');
    await page.waitForTimeout(1000);

    // 点击开始按钮
    await page.click('canvas', { position: { x: 400, y: 350 } });
    await page.waitForTimeout(1500);

    // 验证玩家飞船存在
    const hasPlayer = await page.evaluate(() => {
        return window.__phaserGame?.scene
            .getScene('GameScene')?.player?.active;
    });
    expect(hasPlayer).toBe(true);
});

test('射击并消灭敌人', async ({ page }) => {
    await page.goto('http://localhost:8080');
    await page.waitForTimeout(1000);
    await page.click('canvas');
    await page.waitForTimeout(1500);

    // 按住空格射击3秒
    await page.keyboard.down('Space');
    await page.waitForTimeout(3000);
    await page.keyboard.up('Space');

    // 验证分数变化
    const score = await page.evaluate(() => {
        return window.__phaserGame?.scene
            .getScene('GameScene')?.scoreSystem?.score;
    });
    expect(score).toBeGreaterThan(0);
});
```

### 6.2 运行视觉测试

```bash
# 在Claude Code中执行
claude -p "启动http-server在8080端口，然后运行Playwright测试验证游戏的三种场景：
1. 主菜单渲染正确
2. 游戏启动后玩家可移动
3. 射击系统正常工作
截图保存到tests/screenshots/目录"
```

Claude Code会自动启动服务器、运行Playwright、分析截图结果，如果发现问题会自动修复代码并重测。

---

## 七、进阶：多Agent并行开发游戏

当游戏复杂度上升，可以使用Claude Code的Subagent系统并行开发。

### 7.1 并行开发架构

```mermaid
graph TB
    PM[主Agent<br/>游戏总监] --> A1[Agent 1<br/>场景系统]
    PM --> A2[Agent 2<br/>战斗系统]
    PM --> A3[Agent 3<br/>UI/HUD]
    PM --> A4[Agent 4<br/>音效系统]
    PM --> A5[Agent 5<br/>测试验证]

    A1 --> S1[src/scenes/<br/>场景管理]
    A2 --> S2[src/systems/<br/>碰撞+武器]
    A3 --> S3[src/ui/<br/>分数+菜单]
    A4 --> S4[src/audio/<br/>音效管理器]
    A5 --> S5[tests/<br/>E2E测试]

    S1 --> INT[集成测试]
    S2 --> INT
    S3 --> INT
    S4 --> INT

    style PM fill:#ff6b6b,color:#fff
    style A1 fill:#4ecdc4,color:#fff
    style A2 fill:#4ecdc4,color:#fff
    style A3 fill:#4ecdc4,color:#fff
    style A4 fill:#4ecdc4,color:#fff
    style A5 fill:#ffe66d,color:#333
```

### 7.2 使用Worktree隔离开发

```bash
# 为每个系统创建隔离的Worktree
claude
> 使用Task工具并行开发以下模块（每个用worktree隔离）：
>
> Agent 1（worktree: feature-scenes）:
> - 实现Boss战场景
> - Boss有3种攻击模式
> - 血条显示在屏幕顶部
>
> Agent 2（worktree: feature-powerups）:
> - 道具系统：三连射、护盾、炸弹
> - 道具从被消灭的敌人随机掉落
> - 道具持续5秒后消失
>
> Agent 3（worktree: feature-audio）:
> - 使用Web Audio API实现音效管理器
> - 射击、爆炸、道具拾取音效
> - 背景音乐循环播放
> - 音量控制接口
>
> 三个Agent完成后自动合并到main分支。
```

每个Agent在独立的Git Worktree中工作，互不干扰：

```mermaid
sequenceDiagram
    participant User as 开发者
    participant Main as 主Agent
    participant A1 as Agent:Boss战
    participant A2 as Agent:道具系统
    participant A3 as Agent:音效

    User->>Main: 启动并行开发
    Main->>A1: 创建worktree<br/>分配Boss战任务
    Main->>A2: 创建worktree<br/>分配道具任务
    Main->>A3: 创建worktree<br/>分配音效任务

    par 并行执行
        A1->>A1: 开发Boss AI
        A2->>A2: 开发道具逻辑
        A3->>A3: 开发音效管理
    end

    A1->>Main: 完成PR #1
    A2->>Main: 完成PR #2
    A3->>Main: 完成PR #3
    Main->>Main: 合并+集成测试
    Main->>User: 全部就绪
```

---

## 八、游戏优化：Claude Code性能调优

### 8.1 性能分析Prompt

```
> 分析我的Phaser游戏的性能问题：
> 1. 检查对象池是否正确回收（不应该new新对象）
> 2. 检查渲染批处理（纹理切换次数）
> 3. 检查碰撞检测范围（是否启用了不必要的碰撞对）
> 4. 分析GC压力（是否有频繁创建临时对象）
> 5. 输出优化建议并直接修复
```

### 8.2 常见性能优化模式

```javascript
// 优化前：每帧创建新Vector（GC噩梦）
update() {
    const velocity = new Phaser.Math.Vector2(0, 0); // ❌ 每帧new
    if (this.cursors.left.isDown) velocity.x = -300;
    this.body.setVelocity(velocity.x, velocity.y);
}

// 优化后：复用预分配对象
export class Player extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'player');
        this._velocity = { x: 0, y: 0 }; // ✅ 预分配
    }

    update() {
        this._velocity.x = 0;
        this._velocity.y = 0;
        if (this.cursors.left.isDown) this._velocity.x = -300;
        this.body.setVelocity(this._velocity.x, this._velocity.y);
    }
}
```

Claude Code会扫描整个项目找出类似模式并批量修复。

---

## 九、发布部署：从本地到可分享

### 9.1 一键构建与部署

```
> 准备游戏发布：
> 1. 所有JS文件合并为单个bundle（不用打包工具，用简单concat）
> 2. 内联所有小于10KB的资源为base64
> 3. 生成单个index.html（零依赖，双击可运行）
> 4. 同时部署到Cloudflare Pages
> 5. 输出可分享的URL
```

### 9.2 单文件发布方案

Claude Code可以生成一个完全自包含的HTML文件——所有代码、样式、资源内联在一个文件里：

```bash
claude -p "将游戏打包为单个HTML文件：
- 所有JS代码内联到<script>标签
- 精灵图转为base64内联
- 音效转为base64内联
- 添加离线缓存Service Worker
- 压缩HTML输出到dist/game.html
文件大小控制在2MB以内"
```

---

## 十、完整工作流程总览

```mermaid
flowchart LR
    A[游戏概念<br/>Prompt描述] --> B[骨架生成<br/>claude -p]
    B --> C[玩法迭代<br/>交互模式]
    C --> D[资源生成<br/>Canvas脚本]
    D --> E[系统开发<br/>Subagent并行]
    E --> F[视觉测试<br/>Playwright]
    F --> G{通过?}
    G -->|否| H[自动修复<br/>重测]
    H --> F
    G -->|是| I[性能优化<br/>对象池+GC]
    I --> J[单文件打包<br/>base64内联]
    J --> K[部署发布<br/>Cloudflare Pages]

    style A fill:#e8f5e9
    style K fill:#c8e6c9
    style H fill:#ffcdd2
```

### 每个阶段的Claude Code命令速查

| 阶段 | 命令模式 | 预计耗时 |
|------|---------|---------|
| 概念→骨架 | `claude -p "生成游戏骨架..."` | 2分钟 |
| 玩法编码 | 交互模式，逐系统对话 | 20分钟 |
| 资源生成 | `claude -p "用Canvas API生成..."` | 3分钟 |
| 并行开发 | Task工具 + Worktree | 10分钟 |
| 测试验证 | Playwright自动截图 | 3分钟 |
| 性能调优 | `claude -p "分析性能..."` | 5分钟 |
| 打包部署 | `claude -p "单文件打包..."` | 2分钟 |

**总计：一个下午，从零到可玩到可分享。**

---

## 十一、避坑指南：游戏开发中的Claude Code陷阱

### 陷阱1：Phaser版本混淆

Claude Code可能在同一个项目中混用Phaser 2和Phaser 3的API。解决方案：

```markdown
<!-- CLAUDE.md -->
## 关键约束
- 使用Phaser 3.80+，严禁Phaser 2 API
- 不使用Phaser.Physics.P2（已废弃）
- 不使用Phaser.Loader.Parser（3.x已重构）
```

### 陷阱2：坐标系混乱

2D游戏中Y轴方向是常见混淆点。明确写在CLAUDE.md：

```markdown
## 坐标系
- 屏幕坐标系：左上角(0,0)，X右增，Y下增
- "向上"= Y值减小
- 画布尺寸：800x600
```

### 陷阱3：游戏循环断裂

Claude Code可能把游戏逻辑放在`create()`而非`update()`中。检查清单：

```bash
claude -p "审查所有Scene文件，确认：
1. 只在create()中做初始化
2. 所有每帧逻辑在update()中
3. 没有在update()中创建新对象（应该用对象池）
4. 所有定时器使用scene.time.addEvent而非setTimeout"
```

### 陷阱4：物理引擎配置遗漏

Phaser的Arcade Physics需要在配置中显式启用：

```javascript
// main.js — 确保物理引擎配置正确
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },     // 太空游戏无重力
            debug: false            // 发布时关闭调试
        }
    },
    scene: [BootScene, MenuScene, GameScene]
};
```

---

## 十二、进阶资源与生态

### 推荐框架选择矩阵

| 框架 | 适合场景 | Claude Code支持度 | 学习曲线 |
|------|---------|-----------------|---------|
| 原生Canvas | 小游戏、学习项目 | 优秀（直接生成） | 低 |
| Phaser 3 | 2D商业游戏 | 优秀（有专属Skill） | 中 |
| Three.js | 3D浏览器游戏 | 良好 | 高 |
| p5.js | 创意编码、艺术游戏 | 优秀（有algorithmic-art Skill） | 低 |
| PixiJS | 高性能2D渲染 | 良好 | 中 |

### 社区资源

- **[Claude Code Game Studios](https://github.com/Donchitos/Claude-Code-Game-Studios/)** — 49 Agent + 72 Skill的开源游戏工作室框架
- **[Phaser官方Claude Code教程](https://phaser.io/news/2026/02/phaser-claude-code-tutorial)** — Phaser.io官方发布的Claude Code集成指南
- **[Game Developer Skill](https://mcpmarket.com/tools/skills/web-game-developer)** — MCP Market上的游戏开发Skill集合
- **[Game Asset Pipeline模板](https://www.aitmpl.com/component/commands/game-development/game-asset-pipeline)** — 资源管线自动化命令模板

---

## 训练营适用性评估

| 训练营类型 | 适配度 | 教学时长 | 建议 |
|-----------|-------|---------|------|
| AI编程入门营 | ★★★★★ | 4小时 | 用原生Canvas路线，降低框架学习成本 |
| 游戏开发速成营 | ★★★★★ | 8小时 | 完整走完本教程，每人交付一款可玩游戏 |
| Claude Code深度营 | ★★★★☆ | 3小时 | 重点讲Subagent并行和Playwright测试 |
| Web全栈训练营 | ★★★☆☆ | 2小时 | 作为趣味项目，展示AI编程的可能性 |
| 少儿编程营 | ★★★★☆ | 3小时 | 适合12岁以上，用p5.js路线更友好 |

**推荐教学节奏**：
1. 第一小时：环境搭建 + CLAUDE.md配置 + 骨架生成（Step 1-3）
2. 第二小时：核心玩法实现——玩家控制、射击、敌人（Step 4-5）
3. 第三小时：碰撞系统、分数、特效 + Playwright视觉测试（Step 6-7）
4. 第四小时：性能优化 + 打包部署 + 学员自由创作（Step 8-9）

---

## 参考来源

1. [Claude Code Game Studios - GitHub](https://github.com/Donchitos/Claude-Code-Game-Studios/) — 49 Agent、72 Skill的开源游戏开发框架
2. [How I Built 3 Browser Games in One Day With Claude AI](https://linuxbeast.com/blog/how-i-built-3-browser-games-in-one-day-with-claude-ai/) — 一天构建3款HTML5游戏的实战记录
3. [Phaser + Claude Code Tutorial](https://phaser.io/news/2026/02/phaser-claude-code-tutorial) — Phaser官方发布的Claude Code集成教程
4. [CLAUDE.md for Game Devs](https://www.mrphilgames.com/blog/claude-md-for-game-devs) — 游戏项目CLAUDE.md配置最佳实践
5. [Claude Code Best Practices](https://code.claude.com/docs/en/best-practices) — Anthropic官方Claude Code使用最佳实践

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)