# Task 1C+1D: 防御塔系统 + 怪物波次系统

## 任务概要
在已完成的 Phaser.js 游戏框架基础上，实现完整的防御塔系统（4种塔+部署逻辑+精力管理）和怪物波次系统（4种怪物+路径寻路+战斗逻辑+KPI扣减）。

**前置条件**：Task 1A+1B 已完成，`game/` 目录已存在，`game/GameScene.ts`、`game/constants.ts`、`game/GameManager.ts` 等已实现。

## 技术架构

```
game/
├── constants.ts          ← 已存在
├── config.ts             ← 已存在  
├── GameScene.ts          ← 已存在，需要集成新系统
├── GameManager.ts        ← 已存在
├── towers/
│   ├── TowerBase.ts      ← 新建
│   ├── InternTower.ts    ← 新建（00后实习生）
│   ├── SeniorDevTower.ts ← 新建（P6资深开发）
│   ├── PPTMasterTower.ts ← 新建（PPT大师）
│   ├── HRBPTower.ts      ← 新建（HRBP辅助塔）
│   └── TowerManager.ts   ← 新建
├── enemies/
│   ├── EnemyBase.ts      ← 新建
│   ├── FreshGraduate.ts  ← 新建（校招应届生）
│   ├── OldEmployee.ts    ← 新建（35岁老员工）
│   ├── TroubleMaker.ts   ← 新建（职业碰瓷王）
│   ├── BossVP.ts         ← 新建（空降VP）
│   ├── EnemyPool.ts      ← 新建（对象池）
│   └── WaveManager.ts    ← 新建（波次管理器）
└── ui/
    ├── TowerPanel.ts     ← 新建（底部塔选择面板）
    └── HUD.ts            ← 新建（升级 GameScene 中的 HUD 逻辑）
```

## 实现规范

### 防御塔系统

**`game/towers/TowerBase.ts`**：
```typescript
export abstract class TowerBase {
  protected scene: Phaser.Scene
  public gridX: number
  public gridY: number
  protected sprite: Phaser.GameObjects.Graphics  // 用 Graphics 绘制（无美术资源）
  protected staminaBar: Phaser.GameObjects.Graphics
  
  // 数值属性
  public readonly cost: number
  public readonly attackRange: number     // 格子单位
  public readonly attackDamage: number
  public readonly attackSpeed: number     // 每秒攻击次数
  public readonly maxStamina: number = 100
  public stamina: number = 100
  
  protected attackCooldown: number = 0
  protected staminaRegen: number = 5  // 每秒恢复量（不攻击时）
  protected isActive: boolean = true  // false = 摸鱼状态
  
  constructor(scene, gridX, gridY) { ... }
  
  // 每帧更新
  update(delta: number, enemies: EnemyBase[]): void {
    this.attackCooldown -= delta
    
    if (this.stamina <= 0) {
      this.isActive = false
    }
    
    if (!this.isActive) {
      // 摸鱼：恢复精力
      this.stamina = Math.min(this.maxStamina, this.stamina + this.staminaRegen * delta / 1000)
      if (this.stamina > 0) this.isActive = true
      this.updateStaminaBar()
      return
    }
    
    // 找目标并攻击
    const target = this.findTarget(enemies)
    if (target && this.attackCooldown <= 0) {
      this.attack(target)
      this.stamina -= 5  // 攻击消耗精力
      this.attackCooldown = 1000 / this.attackSpeed
      this.updateStaminaBar()
    } else if (!target) {
      // 没有目标时恢复精力
      this.stamina = Math.min(this.maxStamina, this.stamina + this.staminaRegen * delta / 1000)
      this.updateStaminaBar()
    }
  }
  
  abstract attack(target: EnemyBase): void
  abstract drawSprite(): void  // 用 Graphics 绘制塔的外观
  
  protected findTarget(enemies: EnemyBase[]): EnemyBase | null {
    // 找射程内血量最多的怪（或最近怪）
    ...
  }
  
  protected updateStaminaBar(): void {
    // 更新精力条颜色和宽度
    ...
  }
  
  // 玩家点击塔时调用：花费10HC购买咖啡
  buyCoffee(): boolean {
    const manager = GameManager.getInstance()
    if (manager.spendHC(COFFEE_COST)) {
      this.stamina = this.maxStamina
      this.isActive = true
      this.updateStaminaBar()
      return true
    }
    return false
  }
  
  destroy(): void { ... }
}
```

**4 种塔的具体实现：**

`InternTower`（00后实习生，50HC）：
- 视觉：绿色小人形状（Graphics 画）
- 攻击：近战（射程1格），单体，15伤害，1.5/s
- 特殊技能"整顿职场"：每次攻击5%概率秒杀（血量<500的）普通怪物
- 被动：每秒1%概率直接离场（调用 destroy，退还 25HC）
- 攻击方式：直接扣血（近战，不需要弹幕）

`SeniorDevTower`（P6资深开发，120HC）：
- 视觉：深蓝色方形，顶部有 `</>` 符号
- 攻击：远程直线，30伤害，1.0/s，射程5格
- 特殊技能"代码屎山"：子弹命中后附加 DOT（10伤害/秒，持续3秒）
- 攻击方式：发射子弹（Graphics 绘制的绿色代码块），直线飞行

`PPTMasterTower`（PPT大师，100HC）：
- 视觉：橙色圆形，有 PPT 图标
- 攻击：范围AOE，5伤害，1.5/s，射程3格（圆形区域）
- 特殊技能"黑话领域"：攻击命中的怪物移速降低40%，持续2秒
- 攻击方式：爆炸效果（Graphics 绘制的扩散圆圈），范围内所有怪物受伤

`HRBPTower`（HRBP，80HC）：
- 视觉：粉色，心形图案
- 攻击：无直接伤害（辅助塔）
- 特殊技能"打鸡血"：每0.5秒给周围1格内的塔攻速+20%（叠加BUFF），每次BUFF消耗自身5精力
- 辅助方式：周期性扫描周围格子，找到塔就给BUFF

**`game/towers/TowerManager.ts`**：
- 维护所有已部署塔的数组
- 处理建塔请求：检查格子合法性（非路径+未占用），扣除HC
- 每帧调用所有塔的 update(delta, enemies)
- 处理塔的点击事件（显示购买咖啡的提示）

**`game/ui/TowerPanel.ts`**（底部塔选择面板，在 Phaser Scene 内用 DOM 或 Phaser.GameObjects 实现）：
- 优先使用 HTML DOM 覆盖层（`document.createElement`），绝对定位在 Canvas 底部
- 4个塔卡片，显示：像素风格图标 + 名称 + 成本
- 当前选中的塔有高亮边框
- HC 不足时显示灰色不可点击状态
- 点击塔卡片后，鼠标进入"建塔模式"，下一次点击地图格子时放置塔

---

### 怪物波次系统

**`game/enemies/EnemyBase.ts`**：
```typescript
export abstract class EnemyBase {
  protected scene: Phaser.Scene
  protected sprite: Phaser.GameObjects.Graphics
  protected healthBar: Phaser.GameObjects.Graphics
  protected quoteText: Phaser.GameObjects.Text  // 头顶语录
  
  public maxHp: number
  public hp: number
  public speed: number  // 像素/秒
  public readonly kpiDamage: number  // 到达终点扣除的 KPI
  public readonly hcReward: number   // 死亡奖励的 HC
  
  // 路径相关
  protected pathPoints: { x: number, y: number }[]  // 像素坐标路径
  protected currentPathIndex: number = 0
  protected distanceTraveled: number = 0
  
  // 状态
  public isDead: boolean = false
  public isActive: boolean = true
  public dotEffects: { damage: number, duration: number, timer: number }[] = []  // DOT效果
  public slowEffect: number = 0  // 减速百分比（0~1）
  public slowTimer: number = 0
  public shieldCount: number = 0  // 护盾层数（老员工专用）
  
  constructor(scene, pathPoints) { ... }
  
  update(delta: number): void {
    if (this.isDead || !this.isActive) return
    
    // 处理DOT效果
    this.processDOT(delta)
    
    // 处理减速
    if (this.slowTimer > 0) {
      this.slowTimer -= delta
      if (this.slowTimer <= 0) this.slowEffect = 0
    }
    
    // 沿路径移动
    this.moveAlongPath(delta)
    
    // 更新血条位置
    this.updateHealthBar()
    this.updateQuoteText()
  }
  
  protected moveAlongPath(delta: number): void {
    if (this.currentPathIndex >= this.pathPoints.length - 1) {
      // 到达终点
      this.reachEnd()
      return
    }
    
    const target = this.pathPoints[this.currentPathIndex + 1]
    const currentSpeed = this.speed * (1 - this.slowEffect)
    const distance = currentSpeed * delta / 1000
    
    // 向目标移动
    ...向 target 方向移动 distance 像素...
    
    // 到达当前路径点后切换到下一个
    ...
  }
  
  takeDamage(damage: number): void {
    if (this.shieldCount > 0) {
      this.shieldCount--
      return  // 护盾吸收
    }
    this.hp -= damage
    this.updateHealthBar()
    if (this.hp <= 0) {
      this.die()
    }
  }
  
  addDOT(damage: number, duration: number): void {
    this.dotEffects.push({ damage, duration, timer: duration })
  }
  
  addSlow(percent: number, duration: number): void {
    this.slowEffect = Math.max(this.slowEffect, percent)
    this.slowTimer = Math.max(this.slowTimer, duration)
  }
  
  protected die(): void {
    this.isDead = true
    const manager = GameManager.getInstance()
    manager.addHC(this.hcReward)
    this.onDeath()  // 子类可重写（碰瓷王扣HC）
    this.destroy()
  }
  
  protected reachEnd(): void {
    const manager = GameManager.getInstance()
    manager.reduceKPI(this.kpiDamage)
    this.isDead = true
    this.destroy()
  }
  
  protected onDeath(): void {}  // 子类重写
  
  abstract drawSprite(): void
  abstract getQuote(): string  // 返回该怪物的语录
  
  destroy(): void {
    this.sprite?.destroy()
    this.healthBar?.destroy()
    this.quoteText?.destroy()
  }
}
```

**4 种怪物：**

`FreshGraduate`（校招应届生）：
- HP: 30, 速度: 120px/s, KPI扣减: 2%, HC奖励: 10
- 护盾: 0
- 视觉：小绿点（Graphics 小圆）
- 语录随机：["求转正！", "我愿意加班！", "卷！卷！卷！"]

`OldEmployee`（35岁老员工）：
- HP: 150, 速度: 50px/s, KPI扣减: 8%, HC奖励: 30
- 护盾: 3层（shieldCount=3，前3次攻击无效）
- 视觉：大蓝方块
- 语录：["我为公司立过功！", "我有10年经验！", "年龄不是问题！"]

`TroubleMaker`（职业碰瓷王）：
- HP: 80, 速度: 80px/s, KPI扣减: 5%, HC奖励: 20
- 特殊：死亡时重写 `onDeath()` 扣玩家20 HC（劳动仲裁）
- 视觉：红色叹号形状
- 语录：["录音笔已开启", "这是违法的！", "我要仲裁！"]

`BossVP`（空降VP）：
- HP: 800, 速度: 40px/s, KPI扣减: 30%, HC奖励: 150
- 技能"组织架构调整"：每20秒触发一次，随机摧毁场上一个防御塔
- 视觉：大金色六边形，周围有特效
- 语录：["我来教大家怎么做事", "你们缺乏战略眼光", "这不是执行力的问题"]
- BOSS出现时：全屏红色闪光效果（Phaser Camera flash）

**`game/enemies/EnemyPool.ts`**（对象池）：
简单实现：维护一个 inactive 数组，acquire 时取出复用，release 时放回。

**`game/enemies/WaveManager.ts`**（波次管理器）：
```typescript
// 6波配置
const WAVE_CONFIG = [
  { enemies: [{ type: 'FreshGraduate', count: 10, interval: 800 }] },  // 第1波
  { enemies: [{ type: 'FreshGraduate', count: 8, interval: 800 }, { type: 'OldEmployee', count: 3, interval: 2000 }] },
  { enemies: [{ type: 'OldEmployee', count: 5, interval: 2000 }, { type: 'TroubleMaker', count: 3, interval: 1500 }] },  // 周报前
  { enemies: [{ type: 'FreshGraduate', count: 12, interval: 600 }, { type: 'TroubleMaker', count: 2, interval: 1500 }] },
  { enemies: [{ type: 'OldEmployee', count: 6, interval: 1500 }, { type: 'TroubleMaker', count: 3, interval: 1500 }] },
  { enemies: [{ type: 'BossVP', count: 1, interval: 0 }, { type: 'OldEmployee', count: 4, interval: 2000 }] },  // Boss波
]

export class WaveManager {
  private currentWave: number = 0
  private isSpawning: boolean = false
  private waveComplete: boolean = false
  
  // 周报触发：第3波结束后
  private onWave3Complete: () => void
  // 胜利：第6波全部消灭
  private onAllWavesComplete: () => void
  
  startNextWave(): void { ... }
  private spawnEnemy(type: string): EnemyBase { ... }
  update(delta: number): void { ... }  // 每帧更新所有活跃怪物
  
  getAllActiveEnemies(): EnemyBase[] { ... }
}
```

**路径像素坐标计算**：
PATH_WAYPOINTS 是格子坐标，需要转换为 Phaser Canvas 像素坐标：
```typescript
// 格子坐标转像素坐标（格子中心）
function gridToPixel(gridX, gridY): { x, y } {
  return {
    x: gridX * TILE_SIZE + TILE_SIZE / 2,
    y: gridY * TILE_SIZE + TILE_SIZE / 2 + HUD_HEIGHT  // 加上顶部HUD高度
  }
}
```

完整路径像素坐标通过对 PATH_WAYPOINTS 相邻点之间插值生成：
```typescript
// 将 PATH_WAYPOINTS 扩展为完整的转折路径（每个转折点都在路径中）
function buildFullPath(): { x, y }[] {
  const points = []
  for (let i = 0; i < PATH_WAYPOINTS.length - 1; i++) {
    const from = gridToPixel(PATH_WAYPOINTS[i].x, PATH_WAYPOINTS[i].y)
    const to = gridToPixel(PATH_WAYPOINTS[i+1].x, PATH_WAYPOINTS[i+1].y)
    points.push(from)
    points.push(to)
  }
  // 去重相邻相同点
  return points.filter((p, i, arr) => 
    i === 0 || p.x !== arr[i-1].x || p.y !== arr[i-1].y
  )
}
```

---

### HUD 与战斗整合

更新 `game/GameScene.ts`，集成两个新系统：
1. 在场景 `create()` 中初始化 TowerManager 和 WaveManager
2. 在场景 `update(time, delta)` 中：
   - 调用 `towerManager.update(delta, waveManager.getAllActiveEnemies())`
   - 调用 `waveManager.update(delta)`
   - 更新 HUD（KPI条、HC显示）
3. 处理格子点击事件：若处于"建塔模式"，调用 `towerManager.placeTower(gridX, gridY, selectedTowerType)`
4. 添加"开始下一波"按钮（按钮文字"召唤下一波"）
5. 波次开始时显示波次提示文字（"第X波来袭！"）

---

### 视觉规范（Graphics 绘制指南，无美术资源）

所有游戏对象用 Phaser.GameObjects.Graphics 绘制：

| 对象 | 形状 | 颜色 |
|------|------|------|
| 00后实习生 | 小圆(r=12) + 十字形身体 | `#22C55E`（绿） |
| P6资深开发 | 方块(24x24) + `</>` 文字 | `#3B82F6`（蓝） |
| PPT大师 | 圆(r=16) + 圆心白点 | `#F59E0B`（橙） |
| HRBP | 菱形(16x16) | `#EC4899`（粉） |
| 校招应届生 | 小圆(r=8) | `#86EFAC`（浅绿） |
| 35岁老员工 | 方块(20x20) + 护盾外框 | `#93C5FD`（浅蓝） |
| 职业碰瓷王 | 三角形 | `#FCA5A5`（浅红） |
| 空降VP | 六边形(r=30) + 金色外框 | `#FBBF24`（金色） |

塔的精力条：宽 40px，高 4px，黄色 `#F59E0B`，底部深灰 `#374151`
怪物血条：宽 30px，高 4px，绿→红渐变（按血量百分比）

---

## 验收标准

1. 可以在地图格子上部署 4 种塔，扣除正确 HC
2. 点击已部署的塔显示精力信息，可以花 10HC 购买咖啡
3. 点击"召唤下一波"按钮，怪物从起点出现并沿 S 型路径移动到终点
4. 塔会自动攻击射程内的怪物
5. 怪物被消灭后奖励 HC，到达终点后扣除 KPI
6. KPI 条和 HC 显示实时更新
7. 35岁老员工前 3 次攻击不掉血（护盾）
8. 职业碰瓷王死亡时扣除玩家 20 HC
9. 完整 6 波可以正常触发

## 相关上下文
- 设计系统：`design-system/大厂保卫战/MASTER.md`
- PRD：`.docs/prd-tower-defense-game.md`
- 计划文档：`.docs/plans/2026-03-21-tower-defense-game.md`
- Task 1A+1B 的产出（已在 `game/` 目录中）
- 开发规范：`@rules/dev-best-practices.md`（**必须先阅读**）

完成开发后，按 `@rules/atomic-commit.md` 规范，将变更按逻辑模块分组提交（禁止 `git add .`），确保所有文件均已 commit 后再结束任务。