子玥酱
（掘金 / 知乎 / CSDN / 简书 同名）
大家好，我是 子玥酱，一名长期深耕在一线的前端程序媛 👩💻。曾就职于多家知名互联网大厂，目前在某国企负责前端软件研发相关工作，主要聚焦于业务型系统的工程化建设与长期维护。
我持续输出和沉淀前端领域的实战经验，日常关注并分享的技术方向包括 前端工程化、小程序、React / RN、Flutter、跨端方案， 在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。
技术方向：前端 / 跨端 / 小程序 / 移动端工程化 内容平台：掘金、知乎、CSDN、简书 创作特点：实战导向、源码拆解、少空谈多落地 文章状态：长期稳定更新，大量原创输出
我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在“API 怎么用”，而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍，希望能帮你在实际工作中少走弯路。
子玥酱 · 前端成长记录官 ✨ 👋 如果你正在做前端，或准备长期走前端这条路 📚 关注我，第一时间获取前端行业趋势与实践总结 🎁 可领取 11 类前端进阶学习资源（工程化 / 框架 / 跨端 / 面试 / 架构） 💡 一起把技术学“明白”，也用“到位”
持续写作，持续进阶。 愿我们都能在代码和生活里，走得更稳一点 🌱
文章目录
-
- 引言
- 一、Demo 目标
-
- AI 对话 + 轻交互游戏
-
- 功能设计
- 二、整体架构
-
- 推荐结构
- 三、核心模块实现
-
- 1、数据模型
- 2、状态管理
- 3、AI 服务
- 4、Agent
- 5、游戏逻辑
- 6、UI 组件
- 7、主页面
- 四、一天开发时间拆解
-
- 上午（3小时）
- 下午（3小时）
- 晚上（2小时）
- 五、升级方向
-
- 1、接入真实 AI
- 2、多端联动
- 3、AI 剧情生成
- 4、NPC 多角色
- 5、任务系统升级
- 六、这个 Demo 的意义
-
- 一个“AI 游戏最小模型”
- 总结
引言
很多人看到“鸿蒙 + AI 游戏”，第一反应是：
“这是不是很复杂？要不要几周甚至几个月？”
其实不需要，如果你用对方法，在 HarmonyOS 上：
1 天就可以做出一个“可运行 + 有 AI + 可扩展”的小游戏 Demo
目标：1 天做出 AI 游戏 Demo 内容：架构 + 代码 + 步骤 + 扩展
一、Demo 目标
我们不要做复杂游戏，只做一个：
AI 对话 + 轻交互游戏
功能设计
玩家进入场景
↓
和 NPC 对话（AI）
↓
NPC 根据对话给任务
↓
玩家完成任务 → 得分
核心亮点：
- 有 UI
- 有状态
- 有 AI
- 可扩展
二、整体架构
推荐结构
entry
├─ pages
│ └─ GamePage.ets
│
├─ components
│ └─ ChatBox.ets
│
├─ services
│ ├─ GameService.ets
│ └─ AIService.ets
│
├─ store
│ └─ GameStore.ets
│
├─ models
│ └─ GameModel.ets
│
└─ agent
└─ NPCAgent.ets
核心链路：
UI → Service → Store → Agent → AI
三、核心模块实现
1、数据模型
// models/GameModel.ets
export interface GameState {
score: number
messages: string[]
currentTask: string
}
2、状态管理
// store/GameStore.ets
export class GameStore {
state: GameState = {
score: 0,
messages: [],
currentTask: ''
}
update(partial: Partial<GameState>) {
this.state = { …this.state, …partial }
}
}
export const gameStore = new GameStore()
3、AI 服务
// services/AIService.ets
export class AIService {
async chat(message: string): Promise<string> {
// 模拟 AI（可替换真实接口）
if (message.includes("任务")) {
return "请去收集 3 个金币"
}
return "你好冒险者！"
}
}
export const aiService = new AIService()
后续可以接真实大模型 API。
4、Agent
// agent/NPCAgent.ets
import { aiService } from '../services/AIService'
import { gameStore } from '../store/GameStore'
export class NPCAgent {
async talk(input: string) {
const reply = await aiService.chat(input)
gameStore.update({
messages: […gameStore.state.messages, `NPC: ${reply}`],
currentTask: reply.includes("收集") ? "collect" : ''
})
}
}
export const npcAgent = new NPCAgent()
这里就是“AI → 游戏逻辑”的桥梁。
5、游戏逻辑
// services/GameService.ets
import { gameStore } from '../store/GameStore'
export class GameService {
sendMessage(text: string) {
gameStore.update({
messages: […gameStore.state.messages, `玩家: ${text}`]
})
}
completeTask() {
if (gameStore.state.currentTask === "collect") {
gameStore.update({
score: gameStore.state.score + 10,
currentTask: ''
})
}
}
}
export const gameService = new GameService()
6、UI 组件
// components/ChatBox.ets
@Component
export struct ChatBox {
@Prop messages: string[]
build() {
Column() {
ForEach(this.messages, msg => {
Text(msg)
})
}
}
}
7、主页面
// pages/GamePage.ets
import { gameStore } from '../store/GameStore'
import { gameService } from '../services/GameService'
import { npcAgent } from '../agent/NPCAgent'
import { ChatBox } from '../components/ChatBox'
@Entry
@Component
struct GamePage {
@State state = gameStore.state
@State input: string = ""
async send() {
gameService.sendMessage(this.input)
await npcAgent.talk(this.input)
this.state = gameStore.state
this.input = ""
}
build() {
Column() {
Text(`Score: ${this.state.score}`)
ChatBox({ messages: this.state.messages })
TextInput({ text: this.input })
.onChange(v => this.input = v)
Button("发送")
.onClick(() => this.send())
Button("完成任务")
.onClick(() => {
gameService.completeTask()
this.state = gameStore.state
})
}
}
}
四、一天开发时间拆解
上午（3小时）
- 搭项目结构
- 写 Store + Service
- 搭 UI
下午（3小时）
- 写 AIService（可 mock）
- 写 Agent
- 接入对话
晚上（2小时）
- 调整 UI
- 加简单玩法
- 测试
8 小时即可完成。
五、升级方向
1、接入真实 AI
await fetch("LLM API")
2、多端联动
distributedSync.send(gameStore.state)
3、AI 剧情生成
ai.generateStory(context)
4、NPC 多角色
agentMap[npcId].talk()
5、任务系统升级
taskEngine.run()
六、这个 Demo 的意义
你做的不是一个简单小游戏，而是：
一个“AI 游戏最小模型”
UI（ArkUI）
+ State（Store）
+ Logic（Service）
+ AI（Agent）
这个结构可以扩展成：
- RPG 游戏
- AI 剧情游戏
- 多端游戏
总结
核心价值不在复杂度，而在：
它验证了一种全新的游戏架构
可以用一句话总结：
传统游戏 = 逻辑驱动
AI 游戏 = 状态 + Agent 驱动
在 HarmonyOS 上，这种模式可以天然支持：
- 多端
- AI
- 分布式
最后：不要一开始就做“大游戏”，先做“可跑的 AI Demo”。
因为：Demo 才是你进入这个赛道的“入场券”。
