从 0 开发一个鸿蒙小游戏（完整实战）

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

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

我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案，

在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。

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

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

子玥酱 · 前端成长记录官 ✨

👋 如果你正在做前端，或准备长期走前端这条路

📚 关注我，第一时间获取前端行业趋势与实践总结

🎁 可领取 11 类前端进阶学习资源 （工程化 / 框架 / 跨端 / 面试 / 架构）

💡 一起把技术学"明白"，也用"到位"

持续写作，持续进阶。

愿我们都能在代码和生活里，走得更稳一点 🌱

文章目录

- 引言
- 一、项目结构（先搭骨架）
- 二、定义游戏数据
- 三、状态管理
- 四、业务逻辑
- [五、UI 组件](#五、UI 组件)
- 六、主页面
- [七、加入简单 AI](#七、加入简单 AI)
- 八、优化结构
- - 当前问题
  - 优化方向
- 九、扩展方向
- - 1、加入碰撞检测
  - 2、加入音效
  - 3、加入排行榜
  - [4、加入 AI NPC](#4、加入 AI NPC)
  - 5、多设备扩展
- 十、你刚刚做了什么？
- - 从：
  - 到：
- 总结

引言

前面我们聊了很多：

架构
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 / 逻辑 / 状态 分离

二、定义游戏数据

ts 复制代码

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

先把"世界"定义出来。

三、状态管理

ts 复制代码

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

所有数据，都走这里。

四、业务逻辑

ts 复制代码

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

ts 复制代码

// 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 只负责展示。

六、主页面

ts 复制代码

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

我们让敌人"聪明一点"。

ts 复制代码

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

}

页面中替换：

ts 复制代码

enemyAI.act()

现在敌人会"追你"。

八、优化结构

当前问题

ts 复制代码

this.state = gameStore.state

手动同步。

优化方向

使用状态订阅
自动更新 UI

九、扩展方向

1、加入碰撞检测

ts 复制代码

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

2、加入音效

ts 复制代码

audio.play("hit.mp3")

3、加入排行榜

ts 复制代码

leaderboard.submit(score)

4、加入 AI NPC

ts 复制代码

npcAgent.decide(state)

5、多设备扩展

复制代码

手机控制
TV 显示

这就是完整演进路径。

十、你刚刚做了什么？

很多人做完 Demo 会觉得：

"好像挺简单？"

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

从：

复制代码

写 UI

到：

复制代码

设计系统：
State
Service
Component
AI

这就是鸿蒙开发的核心。

总结

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

复制代码

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

并且扩展了：

复制代码

AI（Enemy）

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

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

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

你可以继续把它升级为：

多端游戏
AI 游戏
社交游戏

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