呆鸟修仙推荐方案：只抽离逻辑，UI 保持不变

对后续开发新游戏模式的影响

✅ 正面影响（推荐）

1. 逻辑复用性大大提升

// 示例：如果你要开发一个"双人模式"
// 可以直接复用现有的 hooks

// 两个小鸟独立控制
const player1 = useBirdControls({ birdId: 'player1' });
const player2 = useBirdControls({ birdId: 'player2' });

// 复用同一个敌人系统
useEnemySystem({ enemies, setEnemies, /* ... */ });

2. 开发新模式更快

// 比如你要开发"无尽模式"
// 只需要：
// 1. 创建一个新的 hook: useEndlessMode.ts
// 2. 复用 useEnemySystem、useCollision 等基础逻辑
// 3. 修改关卡生成逻辑即可

3. 调试更容易

敌人逻辑有问题？直接调试 useEnemySystem.ts
碰撞检测有问题？直接调试 useCollision.ts
不用在 5300 行代码中翻找

⚠️ 潜在挑战（需要规划）

1. 参数传递变多

// ❌ 如果不做优化，参数列表会很长
useEnemySystem({
  enemies, setEnemies, 
  gameState, setGameState,
  birdX, birdY,
  canvasRef,
  // ... 可能有 20+ 个参数
});

// ✅ 建议使用 context 或 reducer
const gameContext = useGameContext();
useEnemySystem(gameContext);

2. 状态同步问题

// 如果多个 hook 需要更新同一个状态，需要小心
useEnemySystem({ setEnemies });
useCollision({ setEnemies }); // 可能冲突

3. 依赖关系复杂

有些 hooks 依赖其他 hooks 的状态
需要明确调用顺序

💡 我的建议

方案 A：保守重构（推荐）✅

只抽取纯粹的数据处理逻辑，保持状态在 page.tsx

// ✅ 好的抽取：纯函数逻辑
function calculateEnemyPosition(enemy: Enemy, deltaTime: number): Enemy {
  return {
    ...enemy,
    y: enemy.y - Math.abs(enemy.speed) * deltaTime
  };
}

// ✅ 好的抽取：无副作用的计算 hook
const enemyMovements = useEnemyMovements({ enemies, deltaTime });

// ⚠️ 谨慎抽取：修改状态的 hook
useEnemySystem({ enemies, setEnemies }); // 可能导致状态分散

目录结构调整为：

src/
├── app/
│   └── page.tsx（状态管理 + UI，约 4000 行）
├── hooks/
│   ├── useGameLoop.ts（循环逻辑）
│   ├── useEnemyMovements.ts（纯计算，不修改状态）
│   ├── useCollisionDetection.ts（纯计算）
│   └── useSpiritSystem.ts（灵气球逻辑）
├── utils/
│   ├── gameLogic.ts（纯函数：移动、碰撞、伤害计算）
│   └── roundSystem.ts（轮次逻辑）
└── types/
    └── game.ts（类型定义）

方案 B：激进重构（不推荐当前采用）

将所有状态都抽离到 hooks

// ⚠️ 可能导致状态过于分散
const enemies = useEnemies();
const bird = useBird();
const spirits = useSpirits();

问题：

page.tsx 会变成 "拼接层"，代码可读性下降
修改一个逻辑需要在多个文件间跳转
新手开发者难以理解数据流

🎮 对新游戏模式开发的具体影响

场景 1：添加 "无尽模式"

重构前：

需要在 5300 行代码中找到关卡生成逻辑
复制粘贴容易出错
难以维护

重构后（方案 A）：

// src/modes/EndlessMode.ts
export function useEndlessMode() {
  const { enemies, setEnemies } = useGameContext();

  // 复用现有的敌人移动计算
  const movements = useEnemyMovements({ enemies, deltaTime });

  // 只需要自定义生成逻辑
  const generateWave = useCallback(() => {
    // 自定义无尽的波次逻辑
    setEnemies(createEndlessWave(currentDifficulty));
  }, []);

  return { generateWave };
}

场景 2：添加 "多人对战"

重构后（方案 A）：

// src/modes/MultiplayerMode.ts
export function useMultiplayerMode() {
  // 复用小鸟控制逻辑
  const player1 = useBirdControls({ birdId: 'p1' });
  const player2 = useBirdControls({ birdId: 'p2' });

  // 复用敌人系统
  useEnemySystem({ enemies, setEnemies });

  return { player1, player2 };
}

📊 最终推荐

我的建议：采用方案 A（保守重构）

具体执行：

第一阶段（抽取纯函数逻辑） ✅

// src/utils/gameLogic.ts
export function moveEnemy(enemy: Enemy): Enemy { /* ... */ }
export function checkCollision(a: Bird, b: Enemy): boolean { /* ... */ }
export function calculateDamage(attack: number, defense: number): number { /* ... */ }

风险最低
测试最容易
不影响开发新功能

第二阶段（抽取纯计算 hooks） ✅

// src/hooks/useEnemyMovements.ts
export function useEnemyMovements({ enemies, deltaTime }) {
  return enemies.map(e => moveEnemy(e));
}

不修改状态
易于测试
可复用

第三阶段（可选）抽取复杂 useEffect ⚠️

// src/hooks/useGameLoop.ts
export function useGameLoop(params) {
  useEffect(() => {
    // 整合多个子系统
  }, [/* 依赖 */]);
}

需要仔细管理依赖
可能影响性能
建议先验证前两阶段效果

预期效果：

指标	重构前	方案 A（保守）	方案 B（激进）
page.tsx 行数	5300	~4000	~2000
状态管理	集中	集中	分散
开发新模式难度	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
维护难度	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
测试难度	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐

🚀 我的建议

立即开始，但采用保守策略：

✅ 先执行第一阶段：抽取纯函数逻辑（utils/gameLogic.ts）
- 风险极低
- 对新功能开发无影响
- 立即提升代码质量
✅ 验证第一阶段效果后，再考虑第二阶段
- 如果第一阶段的收益足够好，可能就不需要继续了
- 如果还需要优化，再抽取纯计算 hooks
⚠️ 暂不执行第三阶段
- 避免过度设计
- 保持状态集中管理
- 降低学习成本

呆鸟修仙 推荐方案：只抽离逻辑，UI 保持不变