鸿蒙开发实例 | ArkUI JS飞机大战游戏开发

 本篇介绍使用ArkUI JS框架开发一款基于鸿蒙操作系统的飞机大战游戏。这款飞机大战游戏是在普通单机游戏的基础上添加了鸿蒙操作系统分布式支持,使游戏可以同时使用多台鸿蒙操作系统设备,为游戏玩家提供分布式场景的游戏体验。

01、飞机大战游戏介绍

鸿蒙飞机大战游戏,在传统的飞机大战游戏的基础上,增加了鸿蒙操作系统的分布式支持,实现为不同的游戏功能提供最佳的鸿蒙设备展现。例如使用鸿蒙智慧屏展示游戏界面、鸿蒙手机模拟游戏的游戏手柄、鸿蒙音箱设备播放游戏声音,不同的游戏功能通过不同算力的设备来展示,为游戏提供分布式立体的体验效果,如图1所示。

■ 图1 根据不同能力显示不同的游戏UI

游戏涉及多种角色,例如太空、主角飞机、敌机、子弹,还涉及爆炸效果在内的多个游戏角色的变化。同时,游戏中还添加了鸿蒙分布式操作系统的技术元素,这些元素的功能如下。

(1) 可以流转的游戏界面: 在手机上运行的游戏可以流转到电视上,而且可以继续在电视上运行。

(2) 设备转换能力: 手机秒变游戏控制器,把游戏场景流转到鸿蒙智慧屏上,游戏的声音通过音箱播放,鸿蒙操作系统可以把不同设备连接起来形成一个虚拟的超级终端。

(3) 可以有多台设备申请加入游戏中: 多台设备可以申请加入游戏中,此时游戏将从单主角的游戏变成多主角的游戏。

(4) 游戏界面可以根据不同的设备进行适配显示,充分体现鸿蒙的一套代码多设备部署的能力。

通过搭载鸿蒙操作系统的智慧屏,能够更好地展现游戏的画面,让游戏玩家可以更好地体验游戏的画面感,如图2所示。

 

■ 图2 智慧屏展示游戏的效果图

通过鸿蒙分布式软总线实现鸿蒙设备间的自动发现、组网、通信。

通过鸿蒙分布式任务调度实现游戏中不同功能在不同设备上启动、运行。

通过鸿蒙分布式FA、PA 展现技术让游戏功能模块可以在不同设备之间进行流转。

通过鸿蒙分布式数据库系统,提供不同设备间的数据共享。

鸿蒙分布式飞机大战游戏交互效果如图3所示。

■ 图5.3 分布式游戏的交互图

02、飞机大战游戏分析

本游戏案例采用JS端的Canvas实现游戏效果绘制,因为Canvas在不同的鸿蒙设备上运行的性能不同,因此需要特别注意性能问题。

1●游戏性能问题分析

目前鸿蒙的原生Canvas并不能很好地支持游戏开发,鸿蒙JS UI中提供的Canvas主要用来绘制图表。对于飞机大战游戏场景,会涉及多个游戏角色的动画效果,鸿蒙的Canvas渲染能力比较有限,同时对于多游戏角色动画的实现目前虽然可以通过JS中的setInterval实现,但是鸿蒙JS 运行时对多setInterval的执行效率同样非常低,而且多setInterval会造成屏幕闪屏的问题,因此需要尽量避免由于对setInterval的调用太多而造成内存泄漏问题和清除画布带来的闪屏问题。

本案例中的飞机大战需要在不同的硬件设备上运行,因此如何处理鸿蒙Canvas的渲染不足问题和setInterval效率低下问题非常关键。

为了解决Canvas绘制的性能问题,这里通过在整个游戏逻辑中只调用一个setInterval定时器的方式来处理游戏中的多角色动画,这样可以极大地减少因为清除画布带来的闪屏和内存泄漏问题。

2●游戏角色分析

本游戏案例中的游戏角色包括太空背景、主角飞机、敌人飞机、子弹、爆炸效果。具体的

角色分析如下。

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) 爆炸效果随后消失。

03、飞机大战游戏界面实现

本游戏案例的界面分为游戏主界面和游戏控制器手柄界面,游戏主界面是响应式的,可以在TV 大屏和手机屏之间自由适配。

本游戏案例需要创建两个JS Ability,即MainAbility 和GameControlAbility。将MainAbility绑定default component,用于编写游戏的主界面。将GameControlAbility绑定GControl component,用于编写游戏的控制器界面。代码的目录结构如图4所示。

■ 图4 游戏项目的目录结构

游戏主界面包括两个页面: 一个游戏引导页和一个游戏主界面。游戏引导页的页面布局如图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游戏引导页面

游戏引导页面的代码布局如代码示例1所示。

代码示例1 游戏引导界面    planeGame/js/default/nav.hml

<div class="container">
<button class="btn" @click="start(2)">
开始游戏
</button>
<button class="btn" @click="openCtrl()">
打开远程遥控器
</button>
</div>

 打开远程游戏遥控器的代码如代码示例2所示。

代码示例2 打开远程游戏控制器    planeGame/js/default/nav.js

import router from '@system.router';
 
export default {
    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);
        }
    }
 
}

游戏的主界面其实非常简单,如代码示例3 所示,通过canvas绘制,因此HML代码非常简单,这里鸿蒙JavaScript版UI目前还没有Audio,所以采用Video替代Audio。

代码示例3游戏主屏界面    planeGame/js/default/index.hml

<div class="container">
<canvas id="game" class="game" ontouchstart="moveDown" ontouchend="moveUp"></canvas>
<video src="{{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。