《大厂保卫战：最后的打工人》- 任务计划 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 中的集成

// 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" />
}

对象池模式

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

游戏数值常量

// 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

9.5 KiB Raw Permalink Blame History Unescape Escape