子玥酱 （掘金 / 知乎 / CSDN / 简书 同名）

大家好，我是 子玥酱，一名长期深耕在一线的前端程序媛 👩‍💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。

我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括 前端工程化、小程序、React / RN、Flutter、跨端方案，
在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。

技术方向：前端 / 跨端 / 小程序 / 移动端工程化
内容平台：掘金、知乎、CSDN、简书
创作特点：实战导向、源码拆解、少空谈多落地
文章状态：长期稳定更新，大量原创输出

我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在“API 怎么用”，而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍，希望能帮你在实际工作中少走弯路。

子玥酱 · 前端成长记录官 ✨
👋 如果你正在做前端，或准备长期走前端这条路
📚 关注我，第一时间获取前端行业趋势与实践总结
🎁 可领取 11 类前端进阶学习资源（工程化 / 框架 / 跨端 / 面试 / 架构）
💡 一起把技术学“明白”，也用“到位”

持续写作，持续进阶。
愿我们都能在代码和生活里，走得更稳一点 🌱

引言

前面我们聊了很多：

• 架构
• AI
• 多端
• 设计理念

但很多人心里还是有一个问题：

“能不能从 0 带我做一个完整的鸿蒙小游戏？”

很简单：

一个角色左右移动
点击得分
简单 AI 敌人

同时，我们会遵循 HarmonyOS 推荐的结构：

State + UI + Service +（可选）Agent

一、项目结构（先搭骨架）

先不要写代码，先把结构定好：

entry
 ├─ pages
 │   └─ GamePage.ets
 │
 ├─ components
 │   └─ Player.ets
 │
 ├─ services
 │   └─ GameService.ets
 │
 ├─ models
 │   └─ GameModel.ets
 │
 └─ store
     └─ GameStore.ets

核心思想：

UI / 逻辑 / 状态 分离

二、定义游戏数据

// models/GameModel.ets
export interface Player {
  x: number
  y: number
}

export interface Enemy {
  x: number
  y: number
}

export interface GameState {
  player: Player
  enemy: Enemy
  score: number
}

先把“世界”定义出来。

三、状态管理

// store/GameStore.ets
import { GameState } from '../models/GameModel'

export class GameStore {

  state: GameState = {
    player: { x: 100, y: 300 },
    enemy: { x: 200, y: 100 },
    score: 0
  }

  update(partial: Partial<GameState>) {
    this.state = { ...this.state, ...partial }
  }

}

export const gameStore = new GameStore()

所有数据，都走这里。

四、业务逻辑

// services/GameService.ets
import { gameStore } from '../store/GameStore'

export class GameService {

  moveLeft() {
    gameStore.update({
      player: {
        ...gameStore.state.player,
        x: gameStore.state.player.x - 10
      }
    })
  }

  moveRight() {
    gameStore.update({
      player: {
        ...gameStore.state.player,
        x: gameStore.state.player.x + 10
      }
    })
  }

  addScore() {
    gameStore.update({
      score: gameStore.state.score + 1
    })
  }

}

export const gameService = new GameService()

页面不直接改数据，只调用 Service。

五、UI 组件

// components/Player.ets
@Component
export struct Player {

  @Prop x: number
  @Prop y: number

  build() {
    Image("player.png")
      .width(50)
      .height(50)
      .position({
        x: this.x,
        y: this.y
      })
  }

}

UI 只负责展示。

六、主页面

// pages/GamePage.ets
import { gameStore } from '../store/GameStore'
import { gameService } from '../services/GameService'
import { Player } from '../components/Player'

@Entry
@Component
struct GamePage {

  @State state = gameStore.state

  aboutToAppear() {
    this.loop()
  }

  loop() {
    setInterval(() => {
      this.enemyMove()
    }, 500)
  }

  enemyMove() {
    const newX = this.state.enemy.x + (Math.random() * 20 - 10)

    gameStore.update({
      enemy: {
        ...this.state.enemy,
        x: newX
      }
    })

    this.state = gameStore.state
  }

  build() {
    Column() {

      // 玩家
      Player({
        x: this.state.player.x,
        y: this.state.player.y
      })

      // 敌人
      Image("enemy.png")
        .width(50)
        .height(50)
        .position({
          x: this.state.enemy.x,
          y: this.state.enemy.y
        })

      // 分数
      Text(`Score: ${this.state.score}`)
        .fontSize(20)

      // 操作按钮
      Row() {
        Button("←").onClick(() => gameService.moveLeft())
        Button("→").onClick(() => gameService.moveRight())
        Button("+1").onClick(() => gameService.addScore())
      }
    }
    .width('100%')
    .height('100%')
  }

}

到这里，一个完整小游戏已经跑起来了。

七、加入简单 AI

我们让敌人“聪明一点”。

// services/EnemyAI.ets
import { gameStore } from '../store/GameStore'

export class EnemyAI {

  decide() {
    const { player, enemy } = gameStore.state

    if (player.x > enemy.x) {
      return 'right'
    } else {
      return 'left'
    }
  }

  act() {
    const action = this.decide()

    const delta = action === 'right' ? 5 : -5

    gameStore.update({
      enemy: {
        ...gameStore.state.enemy,
        x: gameStore.state.enemy.x + delta
      }
    })
  }

}

页面中替换：

enemyAI.act()

现在敌人会“追你”。

八、优化结构

当前问题

this.state = gameStore.state

手动同步。

优化方向

• 使用状态订阅
• 自动更新 UI

九、扩展方向

1、加入碰撞检测

if (distance(player, enemy) < 50) {
  gameOver()
}

2、加入音效

audio.play("hit.mp3")

3、加入排行榜

leaderboard.submit(score)

4、加入 AI NPC

npcAgent.decide(state)

5、多设备扩展

手机控制
TV 显示

这就是完整演进路径。

十、你刚刚做了什么？

很多人做完 Demo 会觉得：

“好像挺简单？”

但其实你已经完成了一件很重要的事情：

从：

写 UI

到：

设计系统：
State
Service
Component
AI

这就是鸿蒙开发的核心。

总结

我们从 0 做了一个完整鸿蒙小游戏，核心结构是：

Model（数据）
Store（状态）
Service（逻辑）
Component（UI）

并且扩展了：

AI（Enemy）

如果用一句话总结这次实战：

你不是在“写一个小游戏”，而是在“搭一个可扩展的游戏系统”。

最后给你一个建议：不要停在这个 Demo。

你可以继续把它升级为：

• 多端游戏
• AI 游戏
• 社交游戏

在 HarmonyOS 上，这样的项目，才刚刚开始有意思。