本文從一個完整的鴻蒙小游戲?qū)崙?zhàn)項目出發(fā)，詳細(xì)拆解了從項目結(jié)構(gòu)、數(shù)據(jù)定義、狀態(tài)管理、業(yè)務(wù)邏輯到UI組件和AI加入的全過程。文章不僅保留了原始代碼骨架和核心思想，還補充了術(shù)語解釋、同類架構(gòu)對比、性能注意事項、專家建議以及未來多設(shè)備、AI NPC、社交化等擴展趨勢。適合鴻蒙初學(xué)者快速掌握“State+UI+Service”的可擴展游戲設(shè)計方法。

“能不能從 0 帶我做一個完整的鴻蒙小游戲？”

很簡單：

一個角色左右移動
點擊得分
簡單 AI 敵人

同時，我們會遵循 HarmonyOS 推薦的結(jié)構(gòu)：

State + UI + Service +（可選）Agent

擴展：什么是State+UI+Service架構(gòu)？
這種模式將界面、數(shù)據(jù)和業(yè)務(wù)邏輯分離。State（狀態(tài)）是單一數(shù)據(jù)源，UI（界面）只做展示和用戶交互觸發(fā)，Service（服務(wù)）處理所有游戲規(guī)則（移動、碰撞、得分等）。Agent（代理）可選，用于復(fù)雜AI或網(wǎng)絡(luò)請求。對比傳統(tǒng)的MVC模式：MVC中Controller容易臃腫，而鴻蒙的State+UI+Service更輕量，且天然適配ArkUI的響應(yīng)式更新機制。

同類架構(gòu)對比表

專家建議：對于小游戲，優(yōu)先使用State+UI+Service。如果后續(xù)加入網(wǎng)絡(luò)對戰(zhàn)，再考慮引入Agent層處理消息收發(fā)。

一、項目結(jié)構(gòu)（先搭骨架）

先不要寫代碼，先把結(jié)構(gòu)定好：

entry
 ├─ pages
 │   └─ GamePage.ets
 │
 ├─ components
 │   └─ Player.ets
 │
 ├─ services
 │   └─ GameService.ets
 │
 ├─ models
 │   └─ GameModel.ets
 │
 └─ store
     └─ GameStore.ets

核心思想：

UI / 邏輯 / 狀態(tài) 分離

擴展：目錄結(jié)構(gòu)詳解
- entry/src/main/ets/ 是鴻蒙應(yīng)用的主代碼目錄。
- pages/ 存放頁面級組件，例如游戲主界面、排行榜頁面。
- components/ 存放可復(fù)用的UI組件，比如角色頭像、血條、按鈕等。
- game/ 是游戲核心邏輯包：state/ 定義所有狀態(tài)（玩家位置、分?jǐn)?shù)、敵人數(shù)組），service/ 實現(xiàn)移動、碰撞檢測、得分計算，ai/ 存放敵人AI行為樹或簡單追逐算法。
- utils/ 放工具函數(shù)，比如隨機數(shù)生成、坐標(biāo)轉(zhuǎn)換。

注意事項：不要在pages里寫游戲邏輯，否則后續(xù)增加關(guān)卡或多人模式時，代碼會變得難以維護(hù)。保持pages只做“組裝”工作。

二、定義游戲數(shù)據(jù)

// models/GameModel.ets
export interface Player {
  x: number
  y: number
}

export interface Enemy {
  x: number
  y: number
}

export interface GameState {
  player: Player
  enemy: Enemy
  score: number
}

先把“世界”定義出來。

擴展：數(shù)據(jù)結(jié)構(gòu)設(shè)計要點
在鴻蒙中，游戲數(shù)據(jù)通常定義為一個@Observed或@State裝飾的類。例如玩家數(shù)據(jù)應(yīng)包含坐標(biāo)(x, y)、生命值、得分、攜帶道具等。敵人數(shù)據(jù)至少包含坐標(biāo)、類型、移動速度。
術(shù)語解釋：
- @Observed：讓類的屬性變化可被觀察到。
- @State：組件內(nèi)部可變狀態(tài)，變化會觸發(fā)UI刷新。
- @ObjectLink：用于引用被@Observed裝飾的類實例，避免深拷貝開銷。

專家建議：將游戲世界數(shù)據(jù)設(shè)計為不可變快照（Immutable Snapshot）模式？對鴻蒙小游戲來說不必過度設(shè)計。但建議區(qū)分“全局只讀配置”（如重力參數(shù)、地圖大?。┖?ldquo;運行時可變狀態(tài)”（玩家位置、敵人列表），可變狀態(tài)放在一個GameState類中統(tǒng)一管理。

三、狀態(tài)管理

// store/GameStore.ets
import { GameState } from '../models/GameModel'

export class GameStore {

  state: GameState = {
    player: { x: 100, y: 300 },
    enemy: { x: 200, y: 100 },
    score: 0
  }

  update(partial: Partial<GameState>) {
    this.state = { ...this.state, ...partial }
  }

}

export const gameStore = new GameStore()

所有數(shù)據(jù)，都走這里。

擴展：狀態(tài)管理的最佳實踐
在鴻蒙ArkUI中，狀態(tài)管理常用裝飾器有@State、@Prop、@Link、@Provide/@Consume。對于小游戲：
- 游戲主頁面使用@State gameState: GameState持有全局狀態(tài)。
- 子組件（如玩家角色、敵人列表）使用@ObjectLink接收部分狀態(tài)，避免全量傳遞。
- 如果需要跨頁面共享得分或關(guān)卡，可使用@Provide/@Consume或全局單例Store。

注意事項：頻繁修改@State變量可能導(dǎo)致UI過度重繪。例如在游戲循環(huán)中每幀更新100個敵人的坐標(biāo)，會觸發(fā)100次UI刷新。解決方案：使用@Watch監(jiān)聽關(guān)鍵變化（如玩家生命值），而對非UI渲染的數(shù)據(jù)（如路徑計算中間值）不要放在@State中?；蛘卟捎?ldquo;手動幀同步”：在requestAnimationFrame回調(diào)中批量更新狀態(tài)后一次性刷新。

未來趨勢：鴻蒙Next版本將推出更高效的“原子化狀態(tài)”和“差分同步”，類似React的useTransition，開發(fā)者可關(guān)注。

四、業(yè)務(wù)邏輯

// services/GameService.ets
import { gameStore } from '../store/GameStore'

export class GameService {

  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
    })
  }

}

export const gameService = new GameService()

頁面不直接改數(shù)據(jù)，只調(diào)用 Service。

擴展：Service層設(shè)計模式
Service應(yīng)該是純邏輯層，不持有UI引用。典型方法：
- movePlayer(direction)：修改玩家坐標(biāo)，邊界檢測，觸發(fā)碰撞檢測。
- updateEnemies()：遍歷敵人，調(diào)用AI決策，更新坐標(biāo)。
- checkCollisions()：檢測玩家與敵人、物品的碰撞，返回事件列表。

專家建議：Service內(nèi)部可以進(jìn)一步拆分為GamePhysicsService（物理移動、碰撞）、ScoreService（計分、連擊）、AudioService（音效觸發(fā)）。這樣單元測試更容易。另外，Service方法返回值建議只返回“發(fā)生了什么事件”（如碰撞類型、新分?jǐn)?shù)），而不是直接修改UI。UI通過訂閱狀態(tài)變化自動響應(yīng)。

同類對比：
- 傳統(tǒng)Unity開發(fā)：MonoBehavior腳本直接操作Transform，邏輯與組件綁定。
- 鴻蒙Service：純TypeScript類，不依賴UI框架，可移植到Node.js做服務(wù)端驗證。

五、UI 組件

// components/Player.ets
@Component
export struct Player {

  @Prop x: number
  @Prop y: number

  build() {
    Image("player.png")
      .width(50)
      .height(50)
      .position({
        x: this.x,
        y: this.y
      })
  }

}

UI 只負(fù)責(zé)展示。

擴展：UI組件設(shè)計原則
每個組件應(yīng)接收必要的數(shù)據(jù)（通過@Prop或@ObjectLink）和回調(diào)函數(shù)（通過@BuilderParam或箭頭函數(shù)）。例如：
- PlayerComponent：接收玩家坐標(biāo)和血量，點擊時調(diào)用onTap回調(diào)。
- EnemyComponent：接收敵人類型和位置，動畫狀態(tài)由敵人狀態(tài)（移動/攻擊）決定。

注意事項：避免在UI組件中做復(fù)雜計算或網(wǎng)絡(luò)請求。例如不要在每個渲染幀中遍歷所有敵人計算可見性，應(yīng)該在Service中預(yù)先計算好“可見敵人列表”再傳遞給UI。

優(yōu)化技巧：使用@Builder裝飾器提取可復(fù)用布局片段。對于頻繁刷新的游戲畫布，也可以考慮使用Canvas組件直接繪制，繞過ArkUI的組件樹重繪開銷。Canvas更適合做實時動作游戲。

六、主頁面

// pages/GamePage.ets
import { 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
        })

      // 分?jǐn)?shù)
      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%')
  }

}

到這里，一個完整小游戲已經(jīng)跑起來了。

擴展：主頁面生命周期
在aboutToAppear()中初始化游戲Service，注冊鍵盤或觸摸事件。在aboutToDisappear()中清理定時器（如游戲循環(huán)的requestAnimationFrame ID）。
注意事項：如果游戲需要后臺暫停，監(jiān)聽onPageHide和onPageShow。鴻蒙系統(tǒng)會凍結(jié)不可見頁面的定時器，但最好主動暫停游戲循環(huán)以節(jié)省資源。

示例代碼片段（保留占位符，實際不可運行，僅示意）：

aboutToAppear() {
  this.gameLoopId = setInterval(() => {
    this.gameService.update(); // 更新邏輯
    this.gameState = this.gameService.getState(); // 觸發(fā)UI更新
  }, 16); // 約60fps
}

七、加入簡單 AI

我們讓敵人“聰明一點”。

// services/EnemyAI.ets
import { gameStore } from '../store/GameStore'
export class EnemyAI {
  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()

現(xiàn)在敵人會“追你”。

擴展：AI行為詳解 上面實現(xiàn)的追逐AI本質(zhì)是：每一幀計算敵人到玩家的向量，歸一化后乘以速度。這種AI非常簡單，但可能導(dǎo)致所有敵人重疊追玩家。

改進(jìn)方向： - 加入隨機偏移，避免路徑重疊。

實現(xiàn)“群組AI”：敵人之間保持最小距離（類似群聚算法Boids）。

狀態(tài)機AI：敵人有“巡邏”、“追擊”、“攻擊”、“逃跑”狀態(tài)，根據(jù)玩家距離切換。

術(shù)語解釋：

向量歸一化：將方向向量長度變?yōu)?，只保留方向。

歐幾里得距離：sqrt(dx²+dy²)，判斷是否進(jìn)入攻擊范圍。

專家建議：對于鴻蒙小游戲，AI邏輯放在Service中，但復(fù)雜的AI計算可能造成卡頓?？梢允褂肳orker線程單獨計算AI決策，再回傳主線程更新坐標(biāo)。

八、優(yōu)化結(jié)構(gòu)

當(dāng)前問題

this.state = gameStore.state

手動同步。

優(yōu)化方向

• 使用狀態(tài)訂閱
• 自動更新 UI

擴展：狀態(tài)訂閱的實現(xiàn)方式 在鴻蒙中，可以利用@Observed和@ObjectLink實現(xiàn)自動訂閱。另一種方式是使用AppStorage或LocalStorage進(jìn)行跨組件同步。對于游戲，推薦將GameState類標(biāo)記為@Observed，然后在頁面中用@State包裝，任何Service修改GameState的屬性都會自動觸發(fā)UI刷新，無需手動調(diào)用setState。

注意事項：

如果GameState嵌套層次很深（如player.inventory.items[0].count），修改深層屬性可能不會被觀測到。

解決：使用@Track裝飾器或重新賦值整個對象（不推薦）。

更好的做法：保持狀態(tài)扁平化，或使用不可變數(shù)據(jù)模式（每次修改返回新對象）。

性能對比表

九、擴展方向

1、加入碰撞檢測

if (distance(player, enemy) < 50) {
  gameOver()
}

擴展：

碰撞檢測算法 對于矩形碰撞，使用AABB（Axis-Aligned Bounding Box）

檢測：if (rect1.x < rect2.x+rect2.w && ...)。對于圓形，檢測圓心距離。

注意事項：每幀對所有敵人-玩家進(jìn)行O(N)檢測，敵人數(shù)量過多（>100）時可能掉幀?？墒褂每臻g劃分（網(wǎng)格或四叉樹）優(yōu)化。

2、加入音效

audio.play("hit.mp3")

擴展：音效管理最佳實踐
使用@ohos.multimedia.audio或@system.audio。建議預(yù)加載所有音效資源（如new Audio('sound.mp3')），避免游戲過程中IO延遲。對于背景音樂，使用長循環(huán)播放；對于短促音效（跳躍、碰撞），使用輕量級播放器。注意設(shè)置音量類別（媒體/通知），避免與系統(tǒng)音沖突。

3、加入排行榜

leaderboard.submit(score)

擴展：排行榜的云存儲方案
鴻蒙提供了@ohos.data.cloudData或集成華為云服務(wù)。如果僅本地存儲，使用Preferences或分布式數(shù)據(jù)庫。分布式數(shù)據(jù)庫可以在多個鴻蒙設(shè)備間同步排行榜，例如手機和平板查看同一份數(shù)據(jù)。
專家建議：排行榜設(shè)計時考慮防作弊：對分?jǐn)?shù)進(jìn)行加密簽名，或者采用服務(wù)端驗證。小游戲可先實現(xiàn)簡單的“歷史最高分”本地存儲。

4、加入 AI NPC

npcAgent.decide(state)

擴展：NPC行為樹
簡單的追逐AI是行為樹的一個葉子節(jié)點。完整的AI NPC可以具備“對話”、“交易”、“發(fā)布任務(wù)”等。行為樹由Selector、Sequence、Condition等節(jié)點組成。鴻蒙中可以使用第三方庫btjs或自己實現(xiàn)輕量級狀態(tài)機。

5、多設(shè)備擴展

手機控制
TV 顯示

擴展：多設(shè)備協(xié)同實戰(zhàn)
鴻蒙的分布式能力允許手機作為手柄，電視顯示游戲畫面。實現(xiàn)思路：
- 在手機端編寫一個“控制器”Ability，通過DistributedDataKit同步玩家輸入。
- 電視端接收輸入并更新游戲狀態(tài)。
注意事項：需要處理設(shè)備間的網(wǎng)絡(luò)延遲，一般使用預(yù)測回滾（Client-side prediction）技術(shù)。

未來趨勢：鴻蒙Next將推出“一次開發(fā)，多端自適應(yīng)”的聲明式布局，游戲UI可自動適配手機、折疊屏、平板的不同寬高比。

十、你剛剛做了什么？

很多人做完 Demo 會覺得：

“好像挺簡單？”

但其實你已經(jīng)完成了一件很重要的事情：

從：

寫 UI

到：

設(shè)計系統(tǒng)：
State
Service
Component
AI

這就是鴻蒙開發(fā)的核心。

擴展：思維轉(zhuǎn)變的意義
從“寫一次性代碼”到“搭建可擴展系統(tǒng)”，意味著你的項目可以：
- 輕松加入新功能而不破壞原有邏輯（例如增加新敵人類型，只需擴展Service和State）。
- 多人協(xié)作時，UI工程師和邏輯工程師可并行工作。
- 單元測試可以獨立測試Service，無需啟動UI。

專家建議：定期重構(gòu)狀態(tài)和Service的接口，保持單向數(shù)據(jù)流。避免在Service中持有UI相關(guān)的Context或Resource對象。

總結(jié)

我們從 0 做了一個完整鴻蒙小游戲，核心結(jié)構(gòu)是：

Model（數(shù)據(jù)）
Store（狀態(tài)）
Service（邏輯）
Component（UI）

并且擴展了：

AI（Enemy）

如果用一句話總結(jié)這次實戰(zhàn)：

你不是在“寫一個小游戲”，而是在“搭一個可擴展的游戲系統(tǒng)”。

擴展：最終檢查清單
- [ ] 狀態(tài)是否集中在GameState中，沒有散落在各組件？
- [ ] Service方法是否純邏輯，不調(diào)用UI組件？
- [ ] 碰撞檢測、音效、排行榜等擴展是否按需加入？
- [ ] 游戲循環(huán)是否在頁面銷毀時正確清理？
- [ ] 是否測試過在折疊屏或不同分辨率下的顯示？

最后給你一個建議：不要停在這個 Demo。

你可以繼續(xù)把它升級為：

• 多端游戲
• AI 游戲
• 社交游戲

在 HarmonyOS 上，這樣的項目，才剛剛開始有意思。

未來展望：
隨著鴻蒙生態(tài)的發(fā)展，AI能力（如Maxtrix API）、分布式計算、元服務(wù)卡片等新技術(shù)將深度整合進(jìn)游戲開發(fā)。例如，利用卡片在桌面顯示游戲狀態(tài)，無需打開游戲即可查看資源產(chǎn)出；利用AI推理優(yōu)化NPC行為，使敵人更“聰明”。建議開發(fā)者關(guān)注鴻蒙官方每季度的技術(shù)沙龍和開發(fā)者文檔更新。

到此這篇關(guān)于鴻蒙游戲開發(fā)從0到1：手把手帶你搭建完整小游戲系統(tǒng)的文章就介紹到這了,更多相關(guān)鴻蒙游戲開發(fā)從0到1內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論