# 《大厂保卫战：最后的打工人》- 任务计划 v1.0
**日期：** 2026-03-21
**目标：** 在 Next.js 项目中，用 Phaser.js 实现完整的第一关塔防游戏
**设计文档：** `design-system/大厂保卫战/MASTER.md`
**需求文档：** `.docs/prd-tower-defense-game.md`

---

## 功能优先级

| 优先级 | 功能 | 说明 |
|--------|------|------|
| P0 | 游戏基础框架 + 主页入口 | Next.js 页面 + Phaser.js 集成 + 地图渲染 |
| P0 | 防御塔系统 | 4种塔的部署、攻击、精力管理 |
| P0 | 怪物波次系统 | 6波怪物 + 路径寻路 + 战斗逻辑 |
| P1 | 周报结算系统 | 第3波后触发的黑话问答弹窗 |
| P1 | 特殊技能与摸鱼机制 | 各塔特殊能力 + 精力恢复 + 咖啡购买 |
| P1 | 胜利/失败结算界面 | 钉钉风格弹窗 + 绩效评级 |
| P2 | 怪物头顶语录飘字 | 100条黑话随机飘过 |

---

## Phase 1（当前批）：游戏基础框架 + 主页

**目标：** 搭建可运行的 Next.js + Phaser.js 框架，渲染 S 型地图，部署基础塔，实现预设路径怪物移动

### 任务列表

- [ ] **Task 1A: 安装依赖 + 创建游戏入口页面**
  - 批次：当前批
  - 执行方式：串行（基础设施）
  - 前置依赖：无
  - 目标：
    - 安装 `phaser` npm 包
    - 创建 `app/game/page.tsx`：Next.js 游戏页面（`use client`）
    - 创建 `app/page.tsx`：主页（游戏封面 + 进入游戏按钮，覆盖模板原有页面）
    - 字体：从 Google Fonts 加载 Press Start 2P + VT323
  - 涉及范围：
    - `package.json`（添加 phaser 依赖）
    - `app/page.tsx`（主页重写）
    - `app/game/page.tsx`（游戏页面新建）
    - `app/layout.tsx`（添加字体 import）
    - `app/globals.css`（游戏全局样式）
  - 验收标准：访问 `/game` 页面不报错，主页显示游戏封面
  - 验证方式：`curl -s http://localhost:13000/game | grep -c "html"`

- [ ] **Task 1B: Phaser.js 游戏核心框架**
  - 批次：当前批
  - 执行方式：串行（依赖 1A）
  - 前置依赖：Task 1A 完成
  - 目标：
    - 创建 `game/` 目录（游戏源码目录，非 Next.js app 目录）
    - 实现 `game/GameScene.ts`：主游戏场景，S型地图渲染（16x12格，格子48px）
    - 实现 `game/config.ts`：Phaser 配置（Canvas 1280x720，transparent background）
    - 实现 `game/constants.ts`：游戏常量（地图路径坐标、HC初始值200、KPI初始100等）
    - 实现 `game/GameManager.ts`：游戏状态管理（HC、KPI、波次、游戏状态）
    - 在 `app/game/page.tsx` 中挂载 Phaser Game 实例（useEffect）
  - 涉及范围：
    - `game/config.ts`
    - `game/constants.ts`
    - `game/GameScene.ts`
    - `game/GameManager.ts`
    - `app/game/page.tsx`
  - 关键实现细节：
    - S型路径坐标：`[(0,2),(7,2),(7,9),(15,9)]`，格子大小 48px
    - 地图背景：深色办公室风格（`#0A1628`），路径用深褐色（`#2D1B00`）
    - 可建塔区域：路径以外的格子，点击触发建塔UI
    - 所有 Phaser 相关代码只在客户端运行（SSR 需跳过）
  - 验收标准：浏览器显示游戏地图，S型路径可见，格子可点击
  - 验证方式：启动开发服务器后访问 `/game`

- [ ] **Task 1C: 防御塔基础系统（部署+攻击+精力）**
  - 批次：当前批
  - 执行方式：串行（依赖 1B）
  - 前置依赖：Task 1B 完成
  - 目标：
    - 实现 `game/towers/TowerBase.ts`：塔基类（位置、成本、攻速、精力、攻击范围）
    - 实现 4 种塔：
      - `game/towers/InternTower.ts`（00后实习生，50HC，近战）
      - `game/towers/SeniorDevTower.ts`（P6资深开发，120HC，远程直线）
      - `game/towers/PPTMasterTower.ts`（PPT大师，100HC，范围减速）
      - `game/towers/HRBPTower.ts`（HRBP，80HC，辅助Buff）
    - 实现 `game/towers/TowerManager.ts`：塔的部署管理、攻击目标选择
    - HUD 底部：塔选择栏（4个卡片，显示名称、成本、当前可选状态）
    - 点击地图格子后弹出确认浮层，扣除 HC 后放置塔
    - 塔的精力条显示（进度条悬浮在塔上方）
  - 涉及范围：
    - `game/towers/` 目录（5个文件）
    - `game/GameScene.ts`（集成塔管理器）
    - `game/ui/TowerPanel.ts`（底部塔选择 HUD）
  - 验收标准：可以点击格子选塔，扣除 HC 后塔出现在地图上，塔有精力条
  - 验证方式：手动游玩验证

- [ ] **Task 1D: 怪物波次系统（路径寻路+战斗）**
  - 批次：当前批
  - 执行方式：串行（依赖 1B）
  - 前置依赖：Task 1B 完成（可与 1C 并行）
  - 执行方式：并行(P1-游戏核心)（与 1C 并行）
  - 关键实现细节：
    - 实现 `game/enemies/EnemyBase.ts`：怪物基类（血量、移速、路径跟随、受伤、死亡）
    - 实现 4 种怪物：
      - `game/enemies/FreshGraduate.ts`（校招应届生：30HP，快速，数量多）
      - `game/enemies/OldEmployee.ts`（35岁老员工：150HP，慢速，经验护盾）
      - `game/enemies/TroubleMaker.ts`（职业碰瓷王：80HP，死亡扣20HC）
      - `game/enemies/BossVP.ts`（空降VP：800HP，组织架构调整技能）
    - 实现 `game/enemies/WaveManager.ts`：波次管理器（6波配置、波次间隔、怪物生成）
    - 实现路径跟随：沿预设路径坐标数组移动，到达终点扣除 KPI
    - 实现攻击目标选择：塔选择射程内最近怪物
    - 对象池：复用怪物对象，避免频繁 GC
    - 怪物头顶显示血条
  - 涉及范围：
    - `game/enemies/` 目录（6个文件）
    - `game/GameScene.ts`（集成波次管理器）
  - 验收标准：第1波10只应届生沿S型路径走到终点，KPI 正确扣减
  - 验证方式：手动游玩第1波

---

## Phase 2（下一批）：游戏玩法完整化

**目标：** 实现周报结算、特殊技能、完整6波、胜利/失败界面

- [ ] **Task 2A: 周报结算系统 + 特殊技能**
  - 批次：下一批
  - 执行方式：并行(P2-玩法)
  - 前置依赖：Phase 1 全部完成
  - 目标：
    - 实现周报弹窗（第3波结束触发，10秒倒计时，3个黑话选项）
    - 实现选对/超时/选错的结果逻辑
    - 实现各塔特殊技能：整顿职场、代码屎山、黑话领域、打鸡血
    - 实现摸鱼机制：点击塔花10HC买咖啡补满精力
  - 涉及范围：
    - `game/ui/WeeklyReportModal.ts`（周报弹窗）
    - `game/data/buzzwords.ts`（黑话题库100条）
    - 各塔文件的特殊技能方法
  - 验收标准：第3波后弹出周报，选对获得奖励，特殊技能正常触发
  
- [ ] **Task 2B: 胜利/失败结算界面 + HUD完善**
  - 批次：下一批
  - 执行方式：并行(P2-玩法)
  - 前置依赖：Phase 1 全部完成
  - 目标：
    - 失败结算：仿钉钉退群通知弹窗（KPI归零触发）
    - 胜利结算：仿绩效评级界面（6波全部通过）
    - 顶部 HUD 完善：KPI 进度条 + HC 数值实时更新
    - BOSS 出现特效：全屏红色闪光 + 警告文字
    - 怪物头顶语录飘字：100条黑话随机显示
  - 涉及范围：
    - `game/ui/VictoryModal.ts`
    - `game/ui/DefeatModal.ts`
    - `game/ui/HUD.ts`
    - `game/data/quotes.ts`（100条语录）

---

## Phase 3（收尾批）：体验优化

- [ ] **Task 3: 视觉polish + 适配优化**
  - 批次：收尾批
  - 前置依赖：Phase 2 完成
  - 目标：
    - Canvas 缩放适配（不同浏览器窗口大小等比缩放）
    - CRT 扫描线效果（CSS叠加层）
    - 霓虹发光按钮动效
    - 音效模拟（Web Audio API，可跳过）
    - 主页视觉完善（游戏截图预览、特性介绍）

---

## 技术关键点

### Phaser.js 在 Next.js 中的集成
```typescript
// app/game/page.tsx
'use client'
import { useEffect, useRef } from 'react'

export default function GamePage() {
  const gameRef = useRef<Phaser.Game | null>(null)
  
  useEffect(() => {
    // 动态导入 Phaser（避免 SSR 报错）
    import('phaser').then((Phaser) => {
      import('@/game/config').then(({ gameConfig }) => {
        gameRef.current = new Phaser.Game(gameConfig)
      })
    })
    return () => {
      gameRef.current?.destroy(true)
    }
  }, [])
  
  return <div id="game-container" className="w-full h-screen" />
}
```

### 对象池模式
```typescript
// game/enemies/EnemyPool.ts
class EnemyPool {
  private pool: EnemyBase[] = []
  // 从池中获取怪物，没有则创建
  acquire(type: EnemyType): EnemyBase { ... }
  // 怪物死亡后回收
  release(enemy: EnemyBase) { ... }
}
```

### 游戏数值常量
```typescript
// game/constants.ts
export const MAP_COLS = 16
export const MAP_ROWS = 12
export const TILE_SIZE = 48
export const CANVAS_WIDTH = MAP_COLS * TILE_SIZE  // 768 (内部逻辑宽度，Phaser处理)
export const CANVAS_HEIGHT = MAP_ROWS * TILE_SIZE // 576

// S型路径坐标（格子坐标，非像素）
export const PATH_WAYPOINTS = [
  { x: 0, y: 2 },   // 入口（面试间）
  { x: 7, y: 2 },   // 第一个转折
  { x: 7, y: 9 },   // 第二个转折
  { x: 15, y: 9 },  // 出口（财务室）
]

export const INITIAL_HC = 200
export const INITIAL_KPI = 100
```

---

## 相关上下文

- PRD 文档：`.docs/prd-tower-defense-game.md`
- 设计系统：`design-system/大厂保卫战/MASTER.md`
- 开发规范：`@rules/dev-best-practices.md`
- 原子提交规范：`@rules/atomic-commit.md`

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