从 0 开发一个鸿蒙小游戏（完整实战）
子玥酱（掘金 / 知乎 / ZEEKLOG / 简书 同名）
大家好，我是子玥酱，一名长期深耕在一线的前端程序媛 👩💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。
我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案，
在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。
技术方向：前端 / 跨端 / 小程序 / 移动端工程化
内容平台：掘金、知乎、ZEEKLOG、简书
创作特点：实战导向、源码拆解、少空谈多落地
文章状态：长期稳定更新，大量原创输出
我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在“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.etsexportinterfacePlayer{ x:number y:number}exportinterfaceEnemy{ x:number y:number}exportinterfaceGameState{ player: Player enemy: Enemy score:number}先把“世界”定义出来。
三、状态管理
// store/GameStore.etsimport{ GameState }from'../models/GameModel'exportclassGameStore{ state: GameState ={ player:{ x:100, y:300}, enemy:{ x:200, y:100}, score:0}update(partial: Partial<GameState>){this.state ={...this.state,...partial }}}exportconst gameStore =newGameStore()所有数据，都走这里。
四、业务逻辑
// services/GameService.etsimport{ gameStore }from'../store/GameStore'exportclassGameService{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})}}exportconst gameService =newGameService()页面不直接改数据，只调用 Service。
五、UI 组件
// components/Player.ets@Componentexport struct Player {@Prop x:number@Prop y:numberbuild(){Image("player.png").width(50).height(50).position({ x:this.x, y:this.y })}}UI 只负责展示。
六、主页面
// pages/GamePage.etsimport{ 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.etsimport{ gameStore }from'../store/GameStore'exportclassEnemyAI{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 上，这样的项目，才刚刚开始有意思。
