feat(game): 创建游戏核心框架（常量、配置、状态管理、地图渲染、主场景）

game/mapRenderer.ts

@@ -0,0 +1,179 @@
+import type Phaser from 'phaser'
+import {
+  MAP_COLS,
+  MAP_ROWS,
+  GAME_WIDTH,
+  HUD_HEIGHT,
+  PATH_WAYPOINTS,
+  COLOR_PATH,
+  COLOR_BUILDABLE,
+  COLOR_HOVER,
+  COLOR_BORDER,
+  MAP_LABELS,
+  INITIAL_KPI,
+} from './constants'
+
+/** 将折线关键坐标点展开为完整路径格子集合 */
+export function buildPathTiles(
+  waypoints: readonly { x: number; y: number }[]
+): Set<string> {
+  const tiles = new Set<string>()
+  for (let i = 0; i < waypoints.length - 1; i++) {
+    const from = waypoints[i]
+    const to = waypoints[i + 1]
+    if (from.x === to.x) {
+      const minY = Math.min(from.y, to.y)
+      const maxY = Math.max(from.y, to.y)
+      for (let y = minY; y <= maxY; y++) tiles.add(`${from.x},${y}`)
+    } else {
+      const minX = Math.min(from.x, to.x)
+      const maxX = Math.max(from.x, to.x)
+      for (let x = minX; x <= maxX; x++) tiles.add(`${x},${from.y}`)
+    }
+  }
+  return tiles
+}
+
+export const PATH_TILES = buildPathTiles(PATH_WAYPOINTS)
+
+/** 计算格子尺寸 */
+export function getCellSize() {
+  const cellW = Math.floor(GAME_WIDTH / MAP_COLS)
+  const cellH = Math.floor((720 - HUD_HEIGHT) / MAP_ROWS)
+  return { cellW, cellH }
+}
+
+/**
+ * 绘制所有地图格子
+ */
+export function drawAllTiles(
+  g: Phaser.GameObjects.Graphics,
+  hovered: { col: number; row: number } | null
+): void {
+  const { cellW, cellH } = getCellSize()
+  g.clear()
+
+  for (let row = 0; row < MAP_ROWS; row++) {
+    for (let col = 0; col < MAP_COLS; col++) {
+      const isPath = PATH_TILES.has(`${col},${row}`)
+      const isHovered =
+        !isPath && hovered !== null &&
+        hovered.col === col && hovered.row === row
+
+      const fillColor = isPath
+        ? COLOR_PATH
+        : isHovered ? COLOR_HOVER : COLOR_BUILDABLE
+
+      const x = col * cellW
+      const y = HUD_HEIGHT + row * cellH
+
+      g.fillStyle(fillColor, 1)
+      g.fillRect(x + 1, y + 1, cellW - 2, cellH - 2)
+      g.lineStyle(1, COLOR_BORDER, 0.6)
+      g.strokeRect(x, y, cellW, cellH)
+    }
+  }
+}
+
+/**
+ * 渲染地图装饰性标签
+ */
+export function renderMapLabels(scene: Phaser.Scene): void {
+  const { cellW, cellH } = getCellSize()
+  for (const label of MAP_LABELS) {
+    const x = label.col * cellW + cellW / 2
+    const y = HUD_HEIGHT + label.row * cellH + cellH / 2
+    scene.add
+      .text(x, y, label.text, {
+        fontFamily: 'VT323, monospace',
+        fontSize: '14px',
+        color: '#A78BFA',
+      })
+      .setOrigin(0.5, 0.5)
+      .setAlpha(0.5)
+  }
+}
+
+/** HUD 进度条参数 */
+export const BAR_W = 300
+export const BAR_H = 16
+export const BAR_X = (GAME_WIDTH - BAR_W) / 2
+export const BAR_Y = (HUD_HEIGHT - BAR_H) / 2
+
+/**
+ * 渲染顶部 HUD 区域，返回可更新的 Graphics 和 Text 对象
+ */
+export function renderHUD(scene: Phaser.Scene): {
+  kpiBar: Phaser.GameObjects.Graphics
+  kpiText: Phaser.GameObjects.Text
+  hcText: Phaser.GameObjects.Text
+} {
+  // HUD 背景
+  const hudBg = scene.add.graphics()
+  hudBg.fillStyle(0x0a1628, 0.92)
+  hudBg.fillRect(0, 0, GAME_WIDTH, HUD_HEIGHT)
+  hudBg.lineStyle(1, 0x1e3a5f, 1)
+  hudBg.strokeRect(0, 0, GAME_WIDTH, HUD_HEIGHT)
+
+  // 左侧标题
+  scene.add.text(16, HUD_HEIGHT / 2, '大厂保卫战', {
+    fontFamily: "'Press Start 2P', monospace",
+    fontSize: '10px',
+    color: '#A78BFA',
+  }).setOrigin(0, 0.5)
+
+  // KPI 标签
+  scene.add.text(BAR_X - 8, HUD_HEIGHT / 2, 'KPI', {
+    fontFamily: "'Press Start 2P', monospace",
+    fontSize: '8px',
+    color: '#E2E8F0',
+  }).setOrigin(1, 0.5)
+
+  // 进度条背景轨道
+  const trackBar = scene.add.graphics()
+  trackBar.fillStyle(0x1a1a2e, 1)
+  trackBar.fillRect(BAR_X, BAR_Y, BAR_W, BAR_H)
+  trackBar.lineStyle(1, 0x7c3aed, 0.6)
+  trackBar.strokeRect(BAR_X, BAR_Y, BAR_W, BAR_H)
+
+  // KPI 进度前景
+  const kpiBar = scene.add.graphics()
+  updateKPIBar(kpiBar, INITIAL_KPI)
+
+  // KPI 百分比文字
+  const kpiText = scene.add.text(
+    BAR_X + BAR_W / 2, HUD_HEIGHT / 2,
+    `${INITIAL_KPI}%`,
+    {
+      fontFamily: "'Press Start 2P', monospace",
+      fontSize: '8px',
+      color: '#E2E8F0',
+    }
+  ).setOrigin(0.5, 0.5).setDepth(1)
+
+  // 右侧 HC 数值
+  const hcText = scene.add.text(
+    GAME_WIDTH - 16, HUD_HEIGHT / 2,
+    `HC: 200`,
+    {
+      fontFamily: "'Press Start 2P', monospace",
+      fontSize: '10px',
+      color: '#A78BFA',
+    }
+  ).setOrigin(1, 0.5)
+
+  return { kpiBar, kpiText, hcText }
+}
+
+/**
+ * 更新 KPI 进度条（颜色随数值变化：绿→黄→红）
+ */
+export function updateKPIBar(
+  kpiBar: Phaser.GameObjects.Graphics,
+  kpi: number
+): void {
+  kpiBar.clear()
+  const color = kpi > 60 ? 0x22c55e : kpi > 30 ? 0xf59e0b : 0xef4444
+  kpiBar.fillStyle(color, 1)
+  kpiBar.fillRect(BAR_X + 1, BAR_Y + 1, (BAR_W - 2) * (kpi / 100), BAR_H - 2)
+}