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

# 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

# 进入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

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

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

// 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);
            }
        });
    }
}

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

// 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;
    }
}

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

// 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();
        }
    }
}

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

// 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();

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

// 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);
});

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

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

# 为每个系统创建隔离的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分支。

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: 全部就绪

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

// 优化前：每帧创建新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);
    }
}

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

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

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.md -->
## 关键约束
- 使用Phaser 3.80+，严禁Phaser 2 API
- 不使用Phaser.Physics.P2（已废弃）
- 不使用Phaser.Loader.Parser（3.x已重构）

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

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

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