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

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

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

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

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

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

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

引言

很多人看到“鸿蒙 + 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 才是你进入这个赛道的“入场券”。