fix(game): 修复底部塔面板不可见问题，改用React层实现，并用AI素材替换Graphics像素块

2026-03-21 08:32:23 +00:00
parent 66b7776f32
commit 085aa0a407
14 changed files with 405 additions and 469 deletions
--- a/game/enemies/BossVP.ts
+++ b/game/enemies/BossVP.ts
@@ -5,104 +5,74 @@ import { getRandomQuote } from '../data/quotes'
 export class BossVP extends EnemyBase {
  private skillTimer: number = 20000
  private onDestroyTower?: () => void
+  private bossLabel!: Phaser.GameObjects.Text

  constructor(
    scene: Phaser.Scene,
    pathPoints: PathPoint[],
    onDestroyTower?: () => void
  ) {
-    super(scene, pathPoints, 800, 40, 30, 150)
+    super(scene, pathPoints, 800, 40, 30, 150, 'enemy-boss')
    this.onDestroyTower = onDestroyTower
-    this.drawSprite()
-    // BOSS 出现时全屏红色闪光
+    // 放大 BOSS
+    const bossScale = Math.min(this.cellW, this.cellH) / 128 * 1.3
+    this.imageSprite.setScale(bossScale)
+    this.imageSprite.setDepth(12)
+    // BOSS 出现特效
    scene.cameras.main.flash(800, 255, 0, 0, false)
    this.showBossAlert()
+    // BOSS 名字标签
+    this.bossLabel = scene.add.text(this.x, this.y + this.cellH * 0.5, '空降VP', {
+      fontFamily: 'VT323, monospace', fontSize: '14px',
+      color: '#FBBF24', backgroundColor: '#7c2d12', padding: { x: 4, y: 1 },
+    }).setOrigin(0.5, 0).setDepth(15)
  }

  private showBossAlert(): void {
    const alert = this.scene.add
-      .text(640, 360, '⚠ 空降VP来袭！⚠', {
-        fontFamily: 'VT323, monospace',
-        fontSize: '36px',
-        color: '#FBBF24',
-        backgroundColor: '#7F1D1D',
-        padding: { x: 16, y: 8 },
-      })
-      .setOrigin(0.5, 0.5)
-      .setDepth(50)
+      .text(this.scene.scale.width / 2, this.scene.scale.height / 2, '⚠ 空降VP来袭 ⚠', {
+        fontFamily: 'VT323, monospace', fontSize: '36px',
+        color: '#FBBF24', backgroundColor: '#7F1D1D', padding: { x: 16, y: 8 },
+      }).setOrigin(0.5, 0.5).setDepth(50)
    this.scene.tweens.add({
-      targets: alert,
-      alpha: 0,
-      duration: 2500,
-      delay: 500,
+      targets: alert, alpha: 0, duration: 2500, delay: 500,
      onComplete: () => alert.destroy(),
    })
  }

-  drawSprite(): void {
-    if (!this.sprite) return
-    this.sprite.clear()
-    // 金色六边形
-    this.sprite.fillStyle(0xfbbf24, 1)
-    const r = 22
-    this.sprite.fillPoints(this.hexPoints(r), true)
-    // 金色外框
-    this.sprite.lineStyle(3, 0xf59e0b, 1)
-    this.sprite.strokePoints(this.hexPoints(r + 4), false)
-    // 内部颜色
-    this.sprite.fillStyle(0xd97706, 1)
-    this.sprite.fillCircle(0, 0, 8)
-    this.sprite.setDepth(12)
-    this.sprite.setPosition(this.x, this.y)
-  }
-
-  private hexPoints(r: number): Phaser.Types.Math.Vector2Like[] {
-    const pts: Phaser.Types.Math.Vector2Like[] = []
-    for (let i = 0; i < 6; i++) {
-      const angle = (Math.PI / 3) * i - Math.PI / 6
-      pts.push({ x: Math.cos(angle) * r, y: Math.sin(angle) * r })
-    }
-    return pts
-  }
-
  override update(delta: number): void {
    if (this.isDead) return
    super.update(delta)
-
    this.skillTimer -= delta
    if (this.skillTimer <= 0) {
      this.skillTimer = 20000
      this.triggerOrgRestructure()
    }
-    // 重绘六边形到新位置
-    this.drawSprite()
+    // 更新名字标签位置
+    if (this.bossLabel) {
+      this.bossLabel.setPosition(this.x, this.y + this.cellH * 0.5)
+    }
+    // BOSS 金色发光边框
+    this.imageSprite.setTint(this.skillTimer < 3000 ? 0xff6600 : 0xfbbf24)
  }

  private triggerOrgRestructure(): void {
-    // 组织架构调整：随机摧毁一个防御塔
-    if (this.onDestroyTower) {
-      this.onDestroyTower()
-    }
+    this.onDestroyTower?.()
    const txt = this.scene.add
      .text(this.x, this.y - 40, '组织架构调整！', {
-        fontFamily: 'VT323, monospace',
-        fontSize: '18px',
-        color: '#FBBF24',
-        backgroundColor: '#7C2D12',
-        padding: { x: 6, y: 3 },
-      })
-      .setOrigin(0.5, 1)
-      .setDepth(25)
+        fontFamily: 'VT323, monospace', fontSize: '18px',
+        color: '#FBBF24', backgroundColor: '#7C2D12', padding: { x: 6, y: 3 },
+      }).setOrigin(0.5, 1).setDepth(25)
    this.scene.tweens.add({
-      targets: txt,
-      y: this.y - 70,
-      alpha: 0,
-      duration: 2000,
-      onComplete: () => txt.destroy(),
+      targets: txt, y: this.y - 70, alpha: 0,
+      duration: 2000, onComplete: () => txt.destroy(),
    })
  }

-  getQuote(): string {
-    return getRandomQuote('BossVP')
+  override destroy(): void {
+    this.bossLabel?.destroy()
+    super.destroy()
  }
+
+  getQuote(): string { return getRandomQuote('BossVP') }
 }
--- a/game/enemies/EnemyBase.ts
+++ b/game/enemies/EnemyBase.ts
@@ -1,26 +1,23 @@
 import type Phaser from 'phaser'
 import { GameManager } from '../GameManager'
-import { TILE_SIZE, HUD_HEIGHT, PATH_WAYPOINTS } from '../constants'
+import { HUD_HEIGHT, PATH_WAYPOINTS } from '../constants'
+import { getCellSize } from '../mapRenderer'

-export interface PathPoint {
-  x: number
-  y: number
-}
+export interface PathPoint { x: number; y: number }

-/** 将格子坐标转换为像素坐标（格子中心） */
-function gridToPixel(gx: number, gy: number): PathPoint {
+function gridToPixel(gx: number, gy: number, cellW: number, cellH: number): PathPoint {
  return {
-    x: gx * TILE_SIZE + TILE_SIZE / 2,
-    y: gy * TILE_SIZE + TILE_SIZE / 2 + HUD_HEIGHT,
+    x: gx * cellW + cellW / 2,
+    y: gy * cellH + cellH / 2 + HUD_HEIGHT,
  }
 }

-/** 将 PATH_WAYPOINTS 扩展为完整转折路径（去重相邻相同点） */
 export function buildFullPath(): PathPoint[] {
+  const { cellW, cellH } = getCellSize()
  const points: PathPoint[] = []
  for (let i = 0; i < PATH_WAYPOINTS.length - 1; i++) {
-    const from = gridToPixel(PATH_WAYPOINTS[i].x, PATH_WAYPOINTS[i].y)
-    const to = gridToPixel(PATH_WAYPOINTS[i + 1].x, PATH_WAYPOINTS[i + 1].y)
+    const from = gridToPixel(PATH_WAYPOINTS[i].x, PATH_WAYPOINTS[i].y, cellW, cellH)
+    const to = gridToPixel(PATH_WAYPOINTS[i + 1].x, PATH_WAYPOINTS[i + 1].y, cellW, cellH)
    points.push(from)
    points.push(to)
  }
@@ -29,15 +26,14 @@ export function buildFullPath(): PathPoint[] {
  )
 }

-export interface DotEffect {
-  damage: number
-  duration: number
-  timer: number
-}
+export interface DotEffect { damage: number; duration: number; timer: number }

 export abstract class EnemyBase {
  protected scene: Phaser.Scene
-  public sprite!: Phaser.GameObjects.Graphics
+  protected imageSprite!: Phaser.GameObjects.Image
+  // expose for tower targeting & health bar
+  public x: number = 0
+  public y: number = 0
  protected healthBar!: Phaser.GameObjects.Graphics
  protected quoteText!: Phaser.GameObjects.Text

@@ -46,30 +42,32 @@ export abstract class EnemyBase {
  public speed: number
  public readonly kpiDamage: number
  public readonly hcReward: number
+  protected spriteKey: string

  protected pathPoints: PathPoint[]
  protected currentPathIndex: number = 0
-  protected x: number = 0
-  protected y: number = 0

  public isDead: boolean = false
  public isActive: boolean = true

-  get pathProgress(): number {
-    return this.currentPathIndex
-  }
+  get pathProgress(): number { return this.currentPathIndex }
+
  public dotEffects: DotEffect[] = []
  public slowEffect: number = 0
  public slowTimer: number = 0
  public shieldCount: number = 0

+  protected cellW: number
+  protected cellH: number
+
  constructor(
    scene: Phaser.Scene,
    pathPoints: PathPoint[],
    maxHp: number,
    speed: number,
    kpiDamage: number,
-    hcReward: number
+    hcReward: number,
+    spriteKey: string
  ) {
    this.scene = scene
    this.pathPoints = pathPoints
@@ -78,28 +76,40 @@ export abstract class EnemyBase {
    this.speed = speed
    this.kpiDamage = kpiDamage
    this.hcReward = hcReward
+    this.spriteKey = spriteKey
+
+    const { cellW, cellH } = getCellSize()
+    this.cellW = cellW
+    this.cellH = cellH

    if (pathPoints.length > 0) {
      this.x = pathPoints[0].x
      this.y = pathPoints[0].y
    }

-    this.sprite = scene.add.graphics()
+    // 用 AI 图片精灵，尺寸按格子缩放
+    this.imageSprite = scene.add.image(this.x, this.y, spriteKey)
+    const scale = Math.min(cellW, cellH) / 128 * 0.75
+    this.imageSprite.setScale(scale)
+    this.imageSprite.setDepth(10)
+
    this.healthBar = scene.add.graphics()
+
    this.quoteText = scene.add
      .text(this.x, this.y - 30, this.getQuote(), {
        fontFamily: 'VT323, monospace',
-        fontSize: '12px',
+        fontSize: '13px',
        color: '#FFFFFF',
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        padding: { x: 3, y: 2 },
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        padding: { x: 4, y: 2 },
      })
      .setOrigin(0.5, 1)
      .setDepth(15)
      .setAlpha(0)

-    this.drawSprite()
    this.drawHealthBar()
+    // 出生后 0.5s 显示语录
+    scene.time.delayedCall(500, () => { if (!this.isDead) this.showQuote() })
  }

  update(delta: number): void {
@@ -110,11 +120,10 @@ export abstract class EnemyBase {
      if (this.slowTimer <= 0) this.slowEffect = 0
    }
    this.moveAlongPath(delta)
+    this.imageSprite.setPosition(this.x, this.y)
    this.drawHealthBar()
-    this.sprite.setPosition(this.x, this.y)
-    // 语录文字跟随怪物移动
-    if (this.quoteText && this.quoteText.alpha > 0) {
-      this.quoteText.setPosition(this.x, this.y - 30)
+    if (this.quoteText?.alpha > 0) {
+      this.quoteText.setPosition(this.x, this.y - (this.cellH * 0.45))
    }
  }

@@ -122,51 +131,46 @@ export abstract class EnemyBase {
    for (let i = this.dotEffects.length - 1; i >= 0; i--) {
      const dot = this.dotEffects[i]
      dot.timer -= delta
-      const tickDamage = (dot.damage / 1000) * delta
-      this.hp -= tickDamage
-      if (this.hp <= 0) {
-        this.die()
-        return
-      }
-      if (dot.timer <= 0) {
-        this.dotEffects.splice(i, 1)
-      }
+      this.hp -= (dot.damage / 1000) * delta
+      if (this.hp <= 0) { this.die(); return }
+      if (dot.timer <= 0) this.dotEffects.splice(i, 1)
    }
  }

  protected moveAlongPath(delta: number): void {
    if (this.currentPathIndex >= this.pathPoints.length - 1) {
-      this.reachEnd()
-      return
+      this.reachEnd(); return
    }
    const target = this.pathPoints[this.currentPathIndex + 1]
    const currentSpeed = this.speed * (1 - this.slowEffect)
    const distance = (currentSpeed * delta) / 1000
-
    const dx = target.x - this.x
    const dy = target.y - this.y
    const dist = Math.sqrt(dx * dx + dy * dy)
-
    if (dist <= distance) {
-      this.x = target.x
-      this.y = target.y
+      this.x = target.x; this.y = target.y
      this.currentPathIndex++
    } else {
      this.x += (dx / dist) * distance
      this.y += (dy / dist) * distance
    }
+    // 减速时图片变色
+    if (this.slowEffect > 0) {
+      this.imageSprite.setTint(0x93c5fd)
+    } else {
+      this.imageSprite.clearTint()
+    }
  }

  protected drawHealthBar(): void {
    this.healthBar.clear()
-    const bw = 30
-    const bh = 4
+    const bw = this.cellW * 0.5
+    const bh = 5
    const bx = this.x - bw / 2
-    const by = this.y - 20
+    const by = this.y - this.cellH * 0.45
    const ratio = Math.max(0, this.hp / this.maxHp)
    const color = ratio > 0.5 ? 0x22c55e : ratio > 0.25 ? 0xf59e0b : 0xef4444
-
-    this.healthBar.fillStyle(0x374151, 1)
+    this.healthBar.fillStyle(0x1f2937, 1)
    this.healthBar.fillRect(bx, by, bw, bh)
    this.healthBar.fillStyle(color, 1)
    this.healthBar.fillRect(bx, by, bw * ratio, bh)
@@ -182,25 +186,16 @@ export abstract class EnemyBase {
    }
    this.hp -= damage
    this.drawHealthBar()
-    if (this.hp <= 0) {
-      this.die()
-    }
+    if (this.hp <= 0) this.die()
  }

  private showShieldBlock(): void {
    const txt = this.scene.add
      .text(this.x, this.y - 35, '护盾!', {
-        fontFamily: 'VT323, monospace',
-        fontSize: '14px',
-        color: '#93C5FD',
-      })
-      .setOrigin(0.5, 1)
-      .setDepth(20)
+        fontFamily: 'VT323, monospace', fontSize: '14px', color: '#93C5FD',
+      }).setOrigin(0.5, 1).setDepth(20)
    this.scene.tweens.add({
-      targets: txt,
-      y: this.y - 55,
-      alpha: 0,
-      duration: 800,
+      targets: txt, y: this.y - 55, alpha: 0, duration: 800,
      onComplete: () => txt.destroy(),
    })
  }
@@ -217,43 +212,35 @@ export abstract class EnemyBase {
  protected die(): void {
    if (this.isDead) return
    this.isDead = true
-    const manager = GameManager.getInstance()
-    manager.addHC(this.hcReward)
+    GameManager.getInstance().addHC(this.hcReward)
    this.onDeath()
    this.destroy()
  }

  protected reachEnd(): void {
    if (this.isDead) return
-    const manager = GameManager.getInstance()
-    manager.reduceKPI(this.kpiDamage)
+    GameManager.getInstance().reduceKPI(this.kpiDamage)
    this.isDead = true
    this.destroy()
  }

  protected onDeath(): void {}

-  /** 显示头顶语录（出生后随机触发，3秒后淡出） */
  showQuote(): void {
    if (this.isDead || !this.quoteText) return
    this.quoteText.setText(this.getQuote())
-    this.quoteText.setPosition(this.x, this.y - 30)
+    this.quoteText.setPosition(this.x, this.y - this.cellH * 0.45)
    this.quoteText.setAlpha(1)
-    // 3秒后淡出动画
    this.scene.tweens.add({
-      targets: this.quoteText,
-      alpha: 0,
-      duration: 800,
-      delay: 2200,
-      ease: 'Linear',
+      targets: this.quoteText, alpha: 0,
+      duration: 800, delay: 2200, ease: 'Linear',
    })
  }

-  abstract drawSprite(): void
  abstract getQuote(): string

  destroy(): void {
-    this.sprite?.destroy()
+    this.imageSprite?.destroy()
    this.healthBar?.destroy()
    this.quoteText?.destroy()
  }
--- a/game/enemies/FreshGraduate.ts
+++ b/game/enemies/FreshGraduate.ts
@@ -4,20 +4,7 @@ import { getRandomQuote } from '../data/quotes'

 export class FreshGraduate extends EnemyBase {
  constructor(scene: Phaser.Scene, pathPoints: PathPoint[]) {
-    super(scene, pathPoints, 30, 120, 2, 10)
-    this.drawSprite()
-  }
-
-  drawSprite(): void {
-    if (!this.sprite) return
-    this.sprite.clear()
-    this.sprite.fillStyle(0x86efac, 1)
-    this.sprite.fillCircle(0, 0, 8)
-    this.sprite.setDepth(10)
-    this.sprite.setPosition(this.x, this.y)
-  }
-
-  getQuote(): string {
-    return getRandomQuote('FreshGraduate')
+    super(scene, pathPoints, 30, 120, 2, 10, 'enemy-fresh')
  }
+  getQuote(): string { return getRandomQuote('FreshGraduate') }
 }
--- a/game/enemies/OldEmployee.ts
+++ b/game/enemies/OldEmployee.ts
@@ -4,35 +4,12 @@ import { getRandomQuote } from '../data/quotes'

 export class OldEmployee extends EnemyBase {
  constructor(scene: Phaser.Scene, pathPoints: PathPoint[]) {
-    super(scene, pathPoints, 150, 50, 8, 30)
+    super(scene, pathPoints, 150, 50, 8, 30, 'enemy-old')
    this.shieldCount = 3
-    this.drawSprite()
+    // 老员工图片稍大
+    const scale = Math.min(this.cellW, this.cellH) / 128 * 0.9
+    this.imageSprite.setScale(scale)
  }

-  drawSprite(): void {
-    if (!this.sprite) return
-    this.sprite.clear()
-    // 大蓝方块
-    this.sprite.fillStyle(0x93c5fd, 1)
-    this.sprite.fillRect(-10, -10, 20, 20)
-    // 护盾外框（金色）
-    this.sprite.lineStyle(2, 0xfbbf24, 0.8)
-    this.sprite.strokeRect(-12, -12, 24, 24)
-    this.sprite.setDepth(10)
-    this.sprite.setPosition(this.x, this.y)
-  }
-
-  override drawHealthBar(): void {
-    super.drawHealthBar()
-    // 绘制护盾数量标记
-    if (!this.healthBar) return
-    for (let i = 0; i < this.shieldCount; i++) {
-      this.healthBar.fillStyle(0xfbbf24, 1)
-      this.healthBar.fillRect(this.x - 15 + i * 11, this.y - 28, 8, 4)
-    }
-  }
-
-  getQuote(): string {
-    return getRandomQuote('OldEmployee')
-  }
+  getQuote(): string { return getRandomQuote('OldEmployee') }
 }
--- a/game/enemies/TroubleMaker.ts
+++ b/game/enemies/TroubleMaker.ts
@@ -5,49 +5,21 @@ import { getRandomQuote } from '../data/quotes'

 export class TroubleMaker extends EnemyBase {
  constructor(scene: Phaser.Scene, pathPoints: PathPoint[]) {
-    super(scene, pathPoints, 80, 80, 5, 20)
-    this.drawSprite()
-  }
-
-  drawSprite(): void {
-    if (!this.sprite) return
-    this.sprite.clear()
-    // 三角形（叹号形状）
-    this.sprite.fillStyle(0xfca5a5, 1)
-    this.sprite.fillTriangle(0, -14, -12, 10, 12, 10)
-    // 叹号
-    this.sprite.fillStyle(0x7f1d1d, 1)
-    this.sprite.fillRect(-2, -6, 4, 8)
-    this.sprite.fillRect(-2, 6, 4, 4)
-    this.sprite.setDepth(10)
-    this.sprite.setPosition(this.x, this.y)
+    super(scene, pathPoints, 80, 80, 5, 20, 'enemy-trouble')
  }

  protected override onDeath(): void {
-    // 劳动仲裁：死亡时扣玩家 20 HC
-    const manager = GameManager.getInstance()
-    manager.spendHC(20)
-    // 显示提示文字
+    GameManager.getInstance().spendHC(20)
    const txt = this.scene.add
      .text(this.x, this.y - 20, '劳动仲裁! -20HC', {
-        fontFamily: 'VT323, monospace',
-        fontSize: '16px',
-        color: '#FCA5A5',
-        backgroundColor: '#7F1D1D',
-        padding: { x: 4, y: 2 },
-      })
-      .setOrigin(0.5, 1)
-      .setDepth(25)
+        fontFamily: 'VT323, monospace', fontSize: '16px',
+        color: '#FCA5A5', backgroundColor: '#7F1D1D', padding: { x: 4, y: 2 },
+      }).setOrigin(0.5, 1).setDepth(25)
    this.scene.tweens.add({
-      targets: txt,
-      y: this.y - 50,
-      alpha: 0,
-      duration: 1500,
-      onComplete: () => txt.destroy(),
+      targets: txt, y: this.y - 50, alpha: 0,
+      duration: 1500, onComplete: () => txt.destroy(),
    })
  }

-  getQuote(): string {
-    return getRandomQuote('TroubleMaker')
-  }
+  getQuote(): string { return getRandomQuote('TroubleMaker') }
 }