本篇介绍使用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。

鸿蒙开发实例 | ArkUI JS飞机大战游戏开发相关推荐

飞机大战游戏开发记录(Java)
一.项目简述: 利用swing图形界面实现飞机大战游戏,利用面向对象思想编程,加入线程,io流,集合等核心api技术,飞机大战游戏包含玩家发射子弹,不同敌机的出现,敌机打中后生成道具,添加子弹和爆炸音 ...
飞机大战html js,html、JS 飞机大战游戏
飞机大战你的浏览器不支持canves画布元素,请更新浏览器获得演示效果. 飞机大战分数:0分 var canvas=document.getElementById('myCanvas'); var ...
Eclipse开发Android平台的飞机大战游戏APP
目录摘要 I 一. 绪论 1 (一) 课题的目的与意义 1 (二) 本课题解决的问题 1 1．欢迎界面 1 2．帮助界面 1 3．游戏界面 1 4．失败界面 2 5．胜利界面 2 6． ...
ue4 飞机大战游戏开发日记
前言:本项目为siki学院发布于哔哩哔哩的开源项目,本文真理了我在复刻项目时遇上的问题,并且记录了开发过程. step1. 资源导入及环境搭建 1. 资源的导入通过拖拽将项目资源文件夹拖拽如cont ...
基于pygame实现的飞机大战游戏
目录 1.引言 1.1 背景 1.2 意义 1.3 功能 2.系统结构 2.1 整体框架 2.2 精灵与精灵组 2.3 功能介绍 2.3.1 玩家飞机 2.3.2 敌机类型和关卡设定 2.3.3 敌机 ...
Python实验，用pygame做飞机大战游戏设计
飞机大战游戏设计摘要:根据课程要求,以及面向对象程序设计的编程思想,在Windows操作系统环境下,运用PyCharm编译程序,以Python语言为开发语言,最终实现飞机大战游戏相应的游戏操作功能 ...
6步搭建一个飞机大战游戏
摘要:本文以华为云软件开发平台DevCloud为例,展示飞机大战游戏开发的DevOps实践流程. DevOps实践 DevOps实践是一种开发.测试运维一体化的模式,其实践的外在表现一般包括了如代码仓 ...
以java语言为工具的粗糙的飞机大战游戏的开发与实现
以java语言为工具的粗糙的飞机大战游戏的开发与实现第一步,导入外部图片的素材库第二步,构建窗体和面板第三步,在GamePanel上面构建背景图画第四步,构建英雄机和敌人的机器,支援机器之类( ...
基于Pygame开发的最完美的飞机大战游戏
基于Pygame开发的最完美的飞机大战游戏后期会给大家上源码,以及完整的实现思路.

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