書圈 - 鴻蒙開發實例 | ArkUI JS飛機大戰遊戲開發－鑽石舞台

本篇介紹使用ArkUI JS框架開發一款基於鴻蒙操作系統的飛機大戰遊戲。這款飛機大戰遊戲是在普通單機遊戲的基礎上添加了鴻蒙操作系統分布式支持,使遊戲可以同時使用多台鴻蒙操作系統設備,為遊戲玩家提供分布式場景的遊戲體驗。

飛機大戰遊戲介紹

鴻蒙飛機大戰遊戲,在傳統的飛機大戰遊戲的基礎上,增加了鴻蒙操作系統的分布式支持,實現為不同的遊戲功能提供最佳的鴻蒙設備展現。例如使用鴻蒙智慧屏展示遊戲界面、鴻蒙手機模擬遊戲的遊戲手柄、鴻蒙音箱設備播放遊戲聲音,不同的遊戲功能通過不同算力的設備來展示,為遊戲提供分布式立體的體驗效果,如圖5.1所示。

■圖5.1 根據不同能力顯示不同的遊戲UI

遊戲涉及多種角色,例如太空、主角飛機、敵機、子彈,還涉及爆炸效果在內的多個遊戲角色的變化。同時,遊戲中還添加了鴻蒙分布式操作系統的技術元素,這些元素的功能如下。

(1) 可以流轉的遊戲界面: 在手機上運行的遊戲可以流轉到電視上,而且可以繼續在電視上運行。

(2) 設備轉換能力: 手機秒變遊戲控制器,把遊戲場景流轉到鴻蒙智慧屏上,遊戲的聲音通過音箱播放,鴻蒙操作系統可以把不同設備連接起來形成一個虛擬的超級終端。

(3) 可以有多台設備申請加入遊戲中: 多台設備可以申請加入遊戲中,此時遊戲將從單主角的遊戲變成多主角的遊戲。

(4) 遊戲界面可以根據不同的設備進行適配顯示,充分體現鴻蒙的一套代碼多設備部署的能力。

通過搭載鴻蒙操作系統的智慧屏,能夠更好地展現遊戲的畫面,讓遊戲玩家可以更好地體驗遊戲的畫面感,如圖5.2所示。

■圖5.2 智慧屏展示遊戲的效果圖

通過鴻蒙分布式軟總線實現鴻蒙設備間的自動發現、組網、通信。

通過鴻蒙分布式任務調度實現遊戲中不同功能在不同設備上啟動、運行。

通過鴻蒙分布式FA、PA 展現技術讓遊戲功能模塊可以在不同設備之間進行流轉。

通過鴻蒙分布式數據庫系統,提供不同設備間的數據共享。

鴻蒙分布式飛機大戰遊戲交互效果如圖5.3所示。

■圖5.3 分布式遊戲的交互圖

飛機大戰遊戲分析

本遊戲案例採用JS端的Canvas實現遊戲效果繪製,因為Canvas在不同的鴻蒙設備上運行的性能不同,因此需要特別注意性能問題。

●

遊戲性能問題分析

目前鴻蒙的原生Canvas並不能很好地支持遊戲開發,鴻蒙JS UI中提供的Canvas主要用來繪製圖表。對於飛機大戰遊戲場景,會涉及多個遊戲角色的動畫效果,鴻蒙的Canvas渲染能力比較有限,同時對於多遊戲角色動畫的實現目前雖然可以通過JS中的setInterval實現,但是鴻蒙JS 運行時對多setInterval的執行效率同樣非常低,而且多setInterval會造成屏幕閃屏的問題,因此需要儘量避免由於對setInterval的調用太多而造成內存泄漏問題和清除畫布帶來的閃屏問題。

本案例中的飛機大戰需要在不同的硬件設備上運行,因此如何處理鴻蒙Canvas的渲染不足問題和setInterval效率低下問題非常關鍵。

為了解決Canvas繪製的性能問題,這裡通過在整個遊戲邏輯中只調用一個setInterval定時器的方式來處理遊戲中的多角色動畫,這樣可以極大地減少因為清除畫布帶來的閃屏和內存泄漏問題。

●

遊戲角色分析

本遊戲案例中的遊戲角色包括太空背景、主角飛機、敵人飛機、子彈、爆炸效果。具體的

角色分析如下。

1. 遊戲太空背景

(1) 實現太空滾動背景。

(2) 實現太空背景音樂。

(3) 太空背景跟隨遊戲的通關變化。

2. 主角飛機

(1) 遊戲玩家可以選擇不同的主角飛機。

(2) 主角飛機可以控制移動和發射子彈。

(3) 主角飛機不可以超出屏幕移動。

(4) 主角飛機生命值可以自由設置,如果飛機被撞一次將減少一次生命值。

(5) 主角飛機等級分為300積分鐵牌飛機、800積分銅牌飛機、1000積分銀牌飛機、

2000積分金牌飛機和10000積分無敵飛機。

(6) 主角飛機可一顆子彈擊毀同級別的敵機。例如鐵牌主角飛機,一顆子彈可以擊毀

一架level1敵機,三顆子彈可以擊毀一架level2敵機,5顆子彈可以擊毀一架level3敵機,

10顆子彈可以擊毀boss飛機。

(7) 主角飛機被敵機撞擊三次後會爆炸銷毀,結束遊戲。

(8) 主角飛機爆炸效果。

3. 敵人飛機

(1) 敵機分4個級別: level1、level2、level3、boss,它們會隨機出現,出現頻率最高的是

level1,出現頻率最低的是level3,boss飛機出現在最後。

(2) 敵機出現在屏幕最上方,隨機位置。

(3) 敵機左右來回運動下落,增加遊戲難度。

(4) 敵機可以發射子彈。

(5) 敵機被主角子彈擊中後會爆炸銷毀。

(6) 敵機運動出屏幕最下邊後會銷毀敵機對象。

4. 子彈

(1) 子彈隨飛機發射,碰撞爆炸。

(2) 子彈運動方向向上或者向下。

(3) 子彈運動的坐標超出屏幕後會銷毀。

(4) 子彈碰撞敵機會爆炸,並銷毀子彈。

5. 爆炸效果

(1) 發生碰撞,爆炸效果繪製。

(2) 爆炸位置為子彈或者敵機位置。

(3) 爆炸聲音。

(4) 爆炸效果隨後消失。

飛機大戰遊戲界面實現

本遊戲案例的界面分為遊戲主界面和遊戲控制器手柄界面,遊戲主界面是響應式的,可以在TV 大屏和手機屏之間自由適配。

本遊戲案例需要創建兩個JS Ability,即MainAbility 和GameControlAbility。將MainAbility綁定default component,用於編寫遊戲的主界面。將GameControlAbility綁定GControl component,用於編寫遊戲的控制器界面。代碼的目錄結構如圖5.4所示。

■圖5.4 遊戲項目的目錄結構

遊戲主界面包括兩個頁面: 一個遊戲引導頁和一個遊戲主界面。遊戲引導頁的頁面布局如圖5.5所示。

在default目錄下添加nav JS Page,在config.json文件中把nav頁面設置為主頁,配置如下:

"js": [{"pages": ["pages/nav/nav","pages/index/index",],"name": "default","window": {"designWidth": 720,"autoDesignWidth": true}}],

pages數組的第1個值為組件的首頁。

■圖5.5遊戲引導頁面

遊戲引導頁面的代碼布局如代碼示例5.1所示。

代碼示例5.1 遊戲引導界面 planeGame/js/default/nav.hml

<div class="container"><button class="btn"@click="start(2)">開始遊戲</button><button class="btn"@click="openCtrl()">打開遠程遙控器</button></div>

打開遠程遊戲遙控器的代碼如代碼示例5.2所示。

代碼示例5.2 打開遠程遊戲控制器 planeGame/js/default/nav.js

importrouter from'@system.router';exportdefault{data: {},start(flag) {let uri = 'pages/nav/nav';switch(flag) {case 2:uri = 'pages/index/index;break;}router.push({uri: uri,})},openCtrl:async function(){let actionData = {uri: 'www.huawei.com'};let target = {bundleName: "com.cangjie.jsabilitydemo",abilityName: "com.cangjie.jsabilitydemo.GameControlAbility",data: actionData};let result = await FeatureAbility.startAbility(target);let ret = JSON.parse(result);if (ret.code == 0) {console.log('success');} else {console.log('cannot start browing service, reason: ' + ret.data);}}}

遊戲的主界面其實非常簡單,如代碼示例5.3 所示,通過canvas繪製,因此HML代碼非常簡單,這裡鴻蒙JavaScript版UI目前還沒有Audio,所以採用Video替代Audio。

代碼示例5.3遊戲主屏界面 planeGame/js/default/index.hml

<divclass="container"><canvasid="game"class="game"ontouchstart="moveDown"ontouchend="moveUp"></canvas><videosrc="{{gaemMusic}}"autoplay="true"style="display: none;"></video></div>.container {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}.game {width: 100%;height: 100%;background-image: URL("/common/imgs/bj.jpg");background-repeat: repeat-y;}

在.game 樣式中通過background-image給canvas添加樣式背景,後面需要給遊戲添加天空的動畫背景,所以需要設置background-repeat:repeat-y。

參考書籍

《HarmonyOS應用開發實戰（JavaScript版）》

ISBN：978-7-302-60031-2

徐禮文著

定價：129元