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

子玥酱掘金 / 知乎 / CSDN / 简书 同名大家好我是子玥酱一名长期深耕在一线的前端程序媛 ‍。曾就职于多家知名互联网大厂目前在某国企负责前端软件研发相关工作主要聚焦于业务型系统的工程化建设与长期维护。我持续输出和沉淀前端领域的实战经验日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。技术方向前端 / 跨端 / 小程序 / 移动端工程化内容平台掘金、知乎、CSDN、简书创作特点实战导向、源码拆解、少空谈多落地文章状态长期稳定更新大量原创输出我的内容主要围绕前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读展开。文章不会停留在“API 怎么用”而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍希望能帮你在实际工作中少走弯路。子玥酱 · 前端成长记录官 ✨ 如果你正在做前端或准备长期走前端这条路 关注我第一时间获取前端行业趋势与实践总结 可领取11 类前端进阶学习资源工程化 / 框架 / 跨端 / 面试 / 架构 一起把技术学“明白”也用“到位”持续写作持续进阶。愿我们都能在代码和生活里走得更稳一点 文章目录引言一、项目结构先搭骨架二、定义游戏数据三、状态管理四、业务逻辑五、UI 组件六、主页面七、加入简单 AI八、优化结构当前问题优化方向九、扩展方向1、加入碰撞检测2、加入音效3、加入排行榜4、加入 AI NPC5、多设备扩展十、你刚刚做了什么从到总结引言前面我们聊了很多架构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:numbery:number}exportinterfaceEnemy{x:numbery:number}exportinterfaceGameState{player:Player enemy:Enemy score:number}先把“世界”定义出来。三、状态管理// store/GameStore.etsimport{GameState}from../models/GameModelexportclassGameStore{state:GameState{player:{x:100,y:300},enemy:{x:200,y:100},score:0}update(partial:PartialGameState){this.state{...this.state,...partial}}}exportconstgameStorenewGameStore()所有数据都走这里。四、业务逻辑// services/GameService.etsimport{gameStore}from../store/GameStoreexportclassGameService{moveLeft(){gameStore.update({player:{...gameStore.state.player,x:gameStore.state.player.x-10}})}moveRight(){gameStore.update({player:{...gameStore.state.player,x:gameStore.state.player.x10}})}addScore(){gameStore.update({score:gameStore.state.score1})}}exportconstgameServicenewGameService()页面不直接改数据只调用 Service。五、UI 组件// components/Player.etsComponentexportstruct Player{Propx:numberPropy:numberbuild(){Image(player.png).width(50).height(50).position({x:this.x,y:this.y})}}UI 只负责展示。六、主页面// pages/GamePage.etsimport{gameStore}from../store/GameStoreimport{gameService}from../services/GameServiceimport{Player}from../components/PlayerEntryComponentstruct GamePage{StatestategameStore.stateaboutToAppear(){this.loop()}loop(){setInterval((){this.enemyMove()},500)}enemyMove(){constnewXthis.state.enemy.x(Math.random()*20-10)gameStore.update({enemy:{...this.state.enemy,x:newX}})this.stategameStore.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/GameStoreexportclassEnemyAI{decide(){const{player,enemy}gameStore.stateif(player.xenemy.x){returnright}else{returnleft}}act(){constactionthis.decide()constdeltaactionright?5:-5gameStore.update({enemy:{...gameStore.state.enemy,x:gameStore.state.enemy.xdelta}})}}页面中替换enemyAI.act()现在敌人会“追你”。八、优化结构当前问题this.stategameStore.state手动同步。优化方向使用状态订阅自动更新 UI九、扩展方向1、加入碰撞检测if(distance(player,enemy)50){gameOver()}2、加入音效audio.play(hit.mp3)3、加入排行榜leaderboard.submit(score)4、加入 AI NPCnpcAgent.decide(state)5、多设备扩展手机控制 TV 显示这就是完整演进路径。十、你刚刚做了什么很多人做完 Demo 会觉得“好像挺简单”但其实你已经完成了一件很重要的事情从写 UI到设计系统 State Service Component AI这就是鸿蒙开发的核心。总结我们从 0 做了一个完整鸿蒙小游戏核心结构是Model数据 Store状态 Service逻辑 ComponentUI并且扩展了AIEnemy如果用一句话总结这次实战你不是在“写一个小游戏”而是在“搭一个可扩展的游戏系统”。最后给你一个建议不要停在这个 Demo。你可以继续把它升级为多端游戏AI 游戏社交游戏在 HarmonyOS 上这样的项目才刚刚开始有意思。