240 lines
9.5 KiB
Markdown
240 lines
9.5 KiB
Markdown
# 《大厂保卫战：最后的打工人》- 任务计划 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 后再结束任务。
|