网罗开发 （小红书、快手、视频号同名）

  大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

展菲：您的前沿技术领航员
👋 大家好，我是展菲！
📱 全网搜索“展菲”，即可纵览我在各大平台的知识足迹。
📣 公众号“Swift社区”，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。
💬 微信端添加好友“fzhanfei”，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。
📅 最新动态：2025 年 3 月 17 日
快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！

引言

很多人对 HarmonyOS 游戏开发有一个误解：

“要做游戏，肯定很复杂，起步就要几天甚至几周。”

但现实是——如果你只做一个 最小可运行 Demo：

1 小时，完全可以做出一个能玩的小游戏。

这篇文章，我们就用最实战的方式，带你从 0 到 1，做一个：

点击得分小游戏（Tap Game）

目标非常简单：

• 点击屏幕 → 分数 +1
• 有基础 UI
• 有简单逻辑
• 可运行

一、最终效果（你要做出来的东西）

逻辑是这样的：

点击按钮 → 分数增加 → UI 实时更新

界面：

分数：10

[ 点击按钮 ]

二、项目结构（最小版本）

先别搞复杂结构，直接用最简单的：

entry
 ├─ pages
 │   └─ Index.ets
 └─ utils（可选）

Demo 阶段核心原则：

先跑起来，再优化结构

三、核心代码（5 分钟写完）

打开 Index.ets，写下面代码：

@Entry
@Component
struct Index {

  @State score: number = 0

  build() {
    Column({ space: 20 }) {

      Text(`分数：${this.score}`)
        .fontSize(30)

      Button("点击 +1")
        .onClick(() => {
          this.score++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

运行之后，你就已经有一个：

可点击
有状态
有 UI

的小游戏了。

四、升级：加入“随机目标”（10 分钟进阶）

现在我们让游戏更“像游戏一点”。

目标：

点击移动的目标得分

1、增加状态

@State targetX: number = 100
@State targetY: number = 200

2、随机位置函数

randomPosition() {
  this.targetX = Math.random() * 300
  this.targetY = Math.random() * 600
}

3、点击目标

Button("🎯")
  .position({ x: this.targetX, y: this.targetY })
  .onClick(() => {
    this.score++
    this.randomPosition()
  })

现在你的游戏变成：

点击目标 → 得分 → 目标随机移动

已经有“玩法”了。

五、加入游戏循环（进阶 20 分钟）

再升级一下：让目标自动移动。

1、定时器模拟 Game Loop

aboutToAppear() {
  setInterval(() => {
    this.targetX += Math.random() * 20 - 10
    this.targetY += Math.random() * 20 - 10
  }, 100)
}

效果：

• 目标在屏幕上“乱跑”
• 玩家需要点击追踪

六、简单封装（组件化）

把目标拆成组件（更接近真实项目）

1、创建组件

@Component
export struct Target {

  @Prop x: number
  @Prop y: number
  @Prop onHit: () => void

  build() {
    Button("🎯")
      .position({ x: this.x, y: this.y })
      .onClick(() => {
        this.onHit()
      })
  }
}

2、页面使用

Target({
  x: this.targetX,
  y: this.targetY,
  onHit: () => {
    this.score++
    this.randomPosition()
  }
})

这一步很关键：

你已经从 Demo，迈向“工程结构”了

七、加入 AI Agent（加分项）

结合上一篇，我们可以让 AI 来“自动点”。

1、简单 Agent

class SimpleAgent {

  decide(x: number, y: number) {
    return { x, y }
  }

}

2、自动点击

const agent = new SimpleAgent()

aboutToAppear() {
  setInterval(() => {
    const action = agent.decide(this.targetX, this.targetY)

    // 模拟点击
    this.score++
    this.randomPosition()

  }, 500)
}

现在变成：

人玩游戏 
AI 也能玩游戏 

八、1 小时拆解时间表

给你一个真实时间分配：

0-10 分钟：基础 UI + 点击
10-20 分钟：随机目标
20-40 分钟：移动目标
40-60 分钟：组件化 + 简单 AI

一小时完全够。

九、可以继续扩展什么？

如果你再多花 1 小时，可以做：

1、倒计时

@State time: number = 30

2、游戏结束

if (this.time <= 0) {
  // 游戏结束
}

3、排行榜（简单版）

let bestScore = storage.get("best") || 0

4、音效

点击播放声音。

十、这个 Demo 的真正价值

这个小游戏看起来很简单，但它已经包含了：

• 状态管理（@State）
• UI 渲染（声明式）
• 事件处理（onClick）
• 定时器（游戏循环）
• 组件拆分
• AI 接入

本质上，你已经完成了一个“最小游戏引擎模型”。

总结

在 HarmonyOS 上做游戏，其实不需要一开始就复杂。

你只需要记住一句话：

游戏 = 状态 + 渲染 + 交互

而这个 Demo 就是最小实现：

点击 → 状态变化 → UI 更新

如果再往前一步，加上 AI：

状态 → Agent → 动作 → 状态

你就已经进入了一个更有意思的领域：

AI + 游戏 = 可交互的智能世界

下一步你可以尝试的方向是：

• 做一个“自动打怪”的 AI
• 接入 OpenClaw 做复杂场景
• 或者做一个“玩家 vs AI”的小游戏

很多复杂系统，都是从这样一个“1 小时 Demo”开始的。