docs: 添加PRD需求文档、任务计划和设计系统

.docs/plans/2026-03-21-tower-defense-game.md

@@ -0,0 +1,239 @@
+# 《大厂保卫战：最后的打工人》- 任务计划 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 后再结束任务。