10 · 街机射击：完整一关验收

目标：补上 HUD、Game Over 文案、R 键 scene.restart()；对照 05 规格做 Phaser 线总验收。
前置：09 · 敌人波次与碰撞

1. 模式说明（本关简化）

模式	本篇采用
存活打分	一直刷怪，靠躲避与射击攒分
通关波次	不做（留给以后）
失败	敌人 overlap 玩家 → Game Over
重置	按 `R` → `this.scene.restart()`

2. HUD

在 create：

private scoreText!: Phaser.GameObjects.Text
private tipText!: Phaser.GameObjects.Text

create() {
  // ... player / groups / overlaps ...

  this.scoreText = this.add.text(12, 12, 'Score: 0', {
    fontSize: '16px',
    color: '#f8fafc',
  })
  this.tipText = this.add
    .text(240, 320, '', {
      fontSize: '20px',
      color: '#f8fafc',
    })
    .setOrigin(0.5)
    .setVisible(false)

  this.input.keyboard!.on('keydown-R', () => {
    if (this.gameOver) this.scene.restart()
  })
}

命中得分处：

this.score += 1
this.scoreText.setText(`Score: ${this.score}`)

onPlayerHit：

private onPlayerHit() {
  if (this.gameOver) return
  this.gameOver = true
  this.physics.pause()
  this.tipText.setText('Game Over — press R')
  this.tipText.setVisible(true)
}

scene.restart() 会重跑 init/create，分数与 Group 回到初始——比手写一堆重置更干净。

3. 完整 create 拼装顺序（备忘）

text

1. 建 player（物理 + 撞世界边界）
2. 建 bullets / enemies Group
3. 绑键盘
4. time.addEvent 刷怪
5. overlap：子弹×敌人、玩家×敌人
6. HUD 文本 + R 监听

update：若 gameOver 则 return；否则移动、射击冷却、回收出屏物体。

4. Phaser 线总验收（对齐 05）

规格	勾选
画布 480×640	[ ]
玩家底部左右移动 + 边界	[ ]
空格向上射击 + 冷却	[ ]
敌机顶部刷出并下落	[ ]
命中得分，双方消失	[ ]
撞玩家 Game Over + R 重开	[ ]
连续可玩约 30s，无明显泄漏/卡死	[ ]
无外部美术包（色块纹理）	[ ]

额外（引擎能力）：

[ ] 能指出哪个 Scene 负责 Boot 纹理、哪个负责玩法
[ ] 能说出 overlap 与手写 AABB 的对应

5. 和阶段一的差异（面试可讲）

维度	Canvas 05	Phaser 10
循环	自写累加器	引擎 + Scene.update
碰撞	`hit()`	Arcade overlap
对象	数组 + splice	Group + killAndHide
重启	手重置状态	`scene.restart()`

玩法相同，架构迁移才是阶段二前半的收获。

6. 接下来

同一玩法迁到 Cocos Creator 3.x：编辑器搭节点 + TS 组件。见 11。

官方入口

→ 11 · Cocos Creator 入门：编辑器与 TS 组件

10 · 街机射击：完整一关验收 ​

1. 模式说明（本关简化） ​

2. HUD ​

3. 完整 create 拼装顺序（备忘） ​

4. Phaser 线总验收（对齐 05） ​

5. 和阶段一的差异（面试可讲） ​

6. 接下来 ​

官方入口 ​

下一篇 ​