转自:OpenAtom OpenHarmony

在9月30日更新的 OpenHarmony3.0 LTS 上,标准系统新增支持了方舟开发框架(ArkUI)、分布式组网和 FA 跨设备迁移能力等新特性,因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。

打开应用在通过邀请用户进行设备认证后,用户须根据提示完成相应操作,然后通过分布式流转实现随机传递炸弹给下一位用户的效果。那么这样一款传炸弹应用如何进行开发呢?

完整的项目结构目录如下:

├─entry
│ └─src
│ └─main
│ │ config.json // 应用配置
│ │
│ ├─ets
│ │ └─MainAbility
│ │ │ app.ets //ets应用程序主入口
│ │ │
│ │ └─pages
│ │ CommonLog.ets // 日志类
│ │ game.ets // 游戏首页
│ │ RemoteDeviceManager.ets // 设备管理类
│ │
│ └─resources // 静态资源目录
│ ├─base
│ │ ├─element
│ │ │
│ │ ├─graphic
│ │ ├─layout
│ │ ├─media // 存放媒体资源
│ │ │
│ │ └─profile
│ └─rawfile

我们可以分为如下 3 步:编写声明式 UI 界面、添加分布式能力和编写游戏逻辑。

一、编写声明式UI界面

1. 新增工程

在 DevEco Studio 中点击 File -> New Project ->Standard Empty Ability->Next,Language 选择 ETS 语言,最后点击 Finish 即创建成功。

图1 新建工程

2. 编写游戏页面

图2 游戏界面效果图

效果图如上可以分为两部分:

  • 顶部状态提示栏

首先在 @entry 组件入口 build() 中使用 Stack 作为容器,达到图片和文字堆叠的效果;

接着依次写入 Image 包裹的两个 Text 组件;

Stack() {
Image($r(<span class="hljs-string">"app.media.title"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">120</span>)
Column() {
Text(<span class="hljs-keyword">this</span>.duration.toString() + <span class="hljs-string">'ms'</span>).fontColor(Color.White)
Text(<span class="hljs-keyword">this</span>.touchText).fontColor(Color.White)
}
}
  • 中间游戏炸弹九宫格区域

使用 Grid 网格容器来编写九宫格区域;
在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片;
在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置;
通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件;

Stack() {
Image($r(<span class="hljs-string">"app.media.background"</span>)).objectFit(ImageFit.Contain)
Grid() {
ForEach(<span class="hljs-keyword">this</span>.grid, (item) => {
GridItem() {
Stack() {
Image($r(<span class="hljs-string">"app.media.squares"</span>)).objectFit(ImageFit.Contain)
Image($r(<span class="hljs-string">"app.media.bomb"</span>))
.width(<span class="hljs-string">'50%'</span>)
.objectFit(ImageFit.Contain)
.visibility(<span class="hljs-keyword">this</span>.bombIndex == item ? Visibility.Visible : Visibility.Hidden)
<span class="hljs-comment">// 炸弹点击事件</span>
.onClick((event) => {
<span class="hljs-comment">// 单击</span>
<span class="hljs-keyword">this</span>.judgeGame(RuleType.click)
})
.gesture(
GestureGroup(GestureMode.Exclusive,
LongPressGesture({ repeat: <span class="hljs-literal">false</span> })
.onAction((event: GestureEvent) => {
<span class="hljs-comment">// 长按</span>
<span class="hljs-keyword">this</span>.judgeGame(RuleType.longPress)
}),
TapGesture({ count: <span class="hljs-number">2</span> })
.onAction(() => {
<span class="hljs-comment">// 双击</span>
<span class="hljs-keyword">this</span>.judgeGame(RuleType.doubleClick)
})
)
}
}.forceRebuild(<span class="hljs-literal">false</span>)
}, item => item)
}
.columnsTemplate(<span class="hljs-string">'1fr 1fr 1fr'</span>)
.rowsTemplate(<span class="hljs-string">'1fr 1fr 1fr'</span>)
.columnsGap(<span class="hljs-number">10</span>)
.rowsGap(<span class="hljs-number">10</span>)
.width(<span class="hljs-string">'90%'</span>)
.height(<span class="hljs-string">'75%'</span>)
}.width(<span class="hljs-string">'80%'</span>).height(<span class="hljs-string">'70%'</span>)

3. 添加弹窗

  • 创建规则游戏弹窗

1)通过 @CustomDialog 装饰器来创建自定义弹窗,使用方式可参考:

自定义弹窗文档:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

2)规则弹窗效果如下,弹窗组成由两个 Text 和两个 Image 竖向排列组成,所以我们可以在 build()下使用 Column 容器来包裹,组件代码如下;

图3 游戏规则

@CustomDialog
struct RuleDialog {
controller: CustomDialogController
confirm: () => <span class="hljs-keyword">void</span>
invite: () => <span class="hljs-keyword">void</span>
@Consume deviceList: RemoteDevice[] build() {
Column() {
Text(<span class="hljs-string">'游戏规则'</span>).fontSize(<span class="hljs-number">30</span>).margin(<span class="hljs-number">20</span>)
Text(<span class="hljs-string">'炸弹会随机出现在9个方块内,需要在规定时间内完成指定操作(点击、双击或长按),即可将炸弹传递给下一个人,小心炸弹可是会越来越快的喔!'</span>)
.fontSize(<span class="hljs-number">24</span>).margin({ bottom: <span class="hljs-number">10</span> })
Image($r(<span class="hljs-string">"app.media.btn_start"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>).margin(<span class="hljs-number">10</span>)
.onClick(() => {
console.info(TAG + <span class="hljs-string">'Click start game'</span>)
<span class="hljs-keyword">if</span> (checkTrustedDevice(<span class="hljs-keyword">this</span>.remoteDeviceModel)) {
<span class="hljs-keyword">this</span>.controller.close()
<span class="hljs-keyword">this</span>.confirm()
}
})
Image($r(<span class="hljs-string">"app.media.btn_Invite"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>).margin(<span class="hljs-number">10</span>)
.onClick(() => {
<span class="hljs-keyword">this</span>.invite()
})
}.width(<span class="hljs-string">'90%'</span>)
.margin(<span class="hljs-number">20</span>)
.backgroundColor(Color.White)
}
}

3)在 @entry 创建 CustomDialogController 对象并传入弹窗所需参数,后面可通过该对象 open() 和 close() 方法进行打开和关闭弹窗;

@Provide deviceList: RemoteDevice[] = []
private ruleDialog: CustomDialogController = <span class="hljs-keyword">new</span> CustomDialogController({
builder: RuleDialog({
invite: () => <span class="hljs-keyword">this</span>.InvitePlayer(),
confirm: () => <span class="hljs-keyword">this</span>.startGame(),
deviceList: <span class="hljs-keyword">this</span>.deviceList
}),
autoCancel: <span class="hljs-literal">false</span>
})
  • 创建游戏失败弹窗,并添加动画效果

图4 游戏失败弹窗动画

1)编写弹窗布局:将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中;

2)用变量来控制动画起始和结束的位置:用 Flex 容器包裹炸弹图片,并用 @State 装饰变量 toggle,通过变量来动态修改 [Flex]的direction 属性;

@State toggle: boolean = <span class="hljs-literal">true</span>
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => <span class="hljs-keyword">void</span>
private interval = <span class="hljs-literal">null</span> build() {
Column() {
Text(<span class="hljs-string">'游戏失败'</span>).fontSize(<span class="hljs-number">30</span>).margin(<span class="hljs-number">20</span>)
Flex({
direction: <span class="hljs-keyword">this</span>.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,
alignItems: ItemAlign.Center
})
{
Image($r(<span class="hljs-string">"app.media.bomb"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">80</span>)
}.height(<span class="hljs-number">200</span>) Image($r(<span class="hljs-string">"app.media.btn_restart"</span>)).objectFit(ImageFit.Contain).height(<span class="hljs-number">120</span>).margin(<span class="hljs-number">10</span>)
.onClick(() => {
<span class="hljs-keyword">this</span>.controller.close()
<span class="hljs-keyword">this</span>.confirm()
})
}
.width(<span class="hljs-string">'80%'</span>)
.margin(<span class="hljs-number">50</span>)
.backgroundColor(Color.White)
}

3)设置动画效果:使用 animateTo 显式动画接口炸弹位置切换时添加动画,并且设置定时器定时执行动画;

aboutToAppear() {
<span class="hljs-keyword">this</span>.setBombAnimate()
} setBombAnimate() {
<span class="hljs-keyword">let</span> fun = () => {
<span class="hljs-keyword">this</span>.toggle = !<span class="hljs-keyword">this</span>.toggle;
}
<span class="hljs-keyword">this</span>.interval = setInterval(() => {
animateTo({ duration: <span class="hljs-number">1500</span>, curve: Curve.Sharp }, fun)
}, <span class="hljs-number">1600</span>)
}

二、添加分布式流转

分布式流转需要在同一网络下通过  DeviceManager 组件进行设备间发现和认证,获取到可信设备的 deviceId 调用 FeatureAbility.startAbility(parameter),即可把应用程序流转到另一设备。

原本分布式流转应用流程如下:

  • 创建 DeviceManager 实例;
  • 调用实例的 startDeviceDiscovery(),开始设备发现未信任设备;
  • 设置设备状态监听 on('deviceStateChange',callback),监听设备上下线状态;
  • 设置设备状态监听 on('deviceFound',callback),监听设备发现;
  • 传入未信任设备参数,调用实例 authenticateDevice 方法,对设备进行 PIN 码认证;
  • 若是已信任设备,可通过实例的 getTrustedDeviceListSync() 方法来获取设备信息;
  • 将设备信息中的 deviceId 传入featureAbility.startAbility 方法,实现流转;
  • 流转接收方可通过featureAbility.getWant() 获取到发送方携带的数据;
  • 注销设备发现监听 off('deviceFound');
  • 注销设备状态监听 off('deviceStateChange');

项目中将上面设备管理封装至 RemoteDeviceManager,通过 RemoteDeviceManager 的四个方法来动态维护 deviceList 设备信息列表。

图5 分布式流转

项目实现分布式流转只需如下流程:

1. 创建RemoteDeviceManager实例

1)导入 RemoteDeviceManager

import {RemoteDeviceManager} from <span class="hljs-string">'./RemoteDeviceManager'</span>

2)声明 @Provide 装饰的设备列表变量 deviceList,和创建 RemoteDeviceManager 实例。

@Provide deviceList: RemoteDevice[] = []
private remoteDm: RemoteDeviceManager = <span class="hljs-keyword">new</span> RemoteDeviceManager(<span class="hljs-keyword">this</span>.deviceList)

2. 刷新设备列表

在生命周期 aboutToAppear 中,调用刷新设备列表和开始发现设备。

aboutToAppear 定义:函数在创建自定义组件的新实例后,在执行其 build 函数之前执行。

aboutToAppear() {
<span class="hljs-keyword">this</span>.remoteDm.refreshRemoteDeviceList() <span class="hljs-comment">// 刷新设备列表</span>
<span class="hljs-keyword">this</span>.remoteDm.startDeviceDiscovery() <span class="hljs-comment">// 开始发现设备</span>
}

3. 设备认证

invitePlayer(remoteDevice:RemoteDevice) {
<span class="hljs-keyword">if</span> (remoteDevice.status == RemoteDeviceStatus.ONLINE) {
prompt.showToast({ message: <span class="hljs-string">"Already invited!"</span> })
<span class="hljs-keyword">return</span>
}
<span class="hljs-keyword">this</span>.remoteDm.authDevice(remoteDevice).then(() => {
prompt.showToast({ message: <span class="hljs-string">"Invite success! deviceName="</span> + remoteDevice.deviceName })
}).catch(() => {
prompt.showToast({ message: <span class="hljs-string">"Invite fail!"</span> })
})
}

4. 跨设备流转

从 deviceList 中获取设备列表在线的设备 Id,通过 featureAbility.startAbility 进行流转。

async startAbilityRandom() {
<span class="hljs-keyword">let</span> deviceId = <span class="hljs-keyword">this</span>.getRandomDeviceId() <span class="hljs-comment">// 随机获取设备id</span>
CommonLog.info(<span class="hljs-string">'featureAbility.startAbility deviceId='</span> + deviceId);
<span class="hljs-keyword">let</span> bundleName = await getBundleName()
<span class="hljs-keyword">let</span> wantValue = {
bundleName: bundleName,
abilityName: <span class="hljs-string">'com.sample.bombgame.MainAbility'</span>,
deviceId: deviceId,
parameters: {
ongoing: <span class="hljs-literal">true</span>,
transferNumber: <span class="hljs-keyword">this</span>.transferNumber + <span class="hljs-number">1</span>
}
};
featureAbility.startAbility({
want: wantValue
}).then((data) => {
CommonLog.info(<span class="hljs-string">' featureAbility.startAbility finished, '</span> + <span class="hljs-built_in">JSON</span>.stringify(data));
featureAbility.terminateSelf((error) => {
CommonLog.info(<span class="hljs-string">'terminateSelf finished, error='</span> + error);
});
});
}

5. 注销监听

在声明周期 aboutToDisappear 进行注销监听。

aboutToDisappear 定义:函数在自定义组件析构消耗之前执行。

aboutToDisappear() {
<span class="hljs-keyword">this</span>.remoteDm.stopDeviceDiscovery() <span class="hljs-comment">// 注销监听</span>
}

三、编写游戏逻辑

1. 开始游戏

startGame() {
CommonLog.info(<span class="hljs-string">'startGame'</span>);
<span class="hljs-keyword">this</span>.randomTouchRule() <span class="hljs-comment">// 随机游戏点击规则</span>
<span class="hljs-keyword">this</span>.setRandomBomb() <span class="hljs-comment">// 随机生成炸弹位置</span>
<span class="hljs-keyword">this</span>.stopCountDown() <span class="hljs-comment">// 停止倒计时</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.transferNumber < <span class="hljs-number">10</span>) {
<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">3000</span> - <span class="hljs-keyword">this</span>.transferNumber * <span class="hljs-number">100</span>
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">2000</span>
}
<span class="hljs-keyword">const</span> interval: number = <span class="hljs-number">500</span>
<span class="hljs-comment">// 开始倒计时</span>
<span class="hljs-keyword">this</span>.timer = setInterval(() => {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.duration <= interval) {
<span class="hljs-keyword">this</span>.duration = <span class="hljs-number">0</span>
clearInterval(<span class="hljs-keyword">this</span>.timer)
<span class="hljs-keyword">this</span>.timer = <span class="hljs-literal">null</span>
<span class="hljs-keyword">this</span>.gameFail()
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.duration -= interval
}
}, interval)
}

2. 判断输赢

编写判断逻辑,用于不同的点击事件中调用。

/**
* 判断游戏输赢
* @param operation 点击类型
*/
judgeGame(operation:RuleType) {
this.stopCountDown()
if (operation != this.ruleText) {
this.gameFail()
} else {
prompt.showToast({ message: "finish" })
this.bombIndex = -1
this.startAbilityRandom()
}
}

3. 游戏失败

游戏失败,弹出游戏失败弹框。

gameFail() {
prompt.showToast({
message: <span class="hljs-string">'Game Fail'</span>
})
CommonLog.info(<span class="hljs-string">'gameFail'</span>);
<span class="hljs-keyword">this</span>.gameFailDialog.open()
}

四、项目下载和导入

项目仓库地址:

https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame

1)git下载

git clone https:<span class="hljs-comment">//gitee.com/openharmony-sig/knowledge_demo_temp.git</span>

2)项目导入

打开 DevEco Studio,点击 File->Open->下载路径/FA/Entertainment/BombGame

五、约束与限制

1. 设备编译约束

 2. 应用编译约束

简单3步,OpenHarmony上跑起ArkUI分布式小游戏的更多相关文章

  1. 简单四步開始树莓派上的Docker之旅

    大概这篇博文发表之后,应该算是我个人的第一篇翻译作品了,翻译的可能不是非常到位,望各位看官大刀砍过来. 原文链接:http://resin.io/blog/docker-on-raspberry-pi ...

  2. 【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】

    说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...

  3. 让python在hadoop上跑起来

    duang~好久没有更新博客啦,原因很简单,实习啦-好吧,我过来这边上班表示觉得自己简直弱爆了.第一周,配置环境:第二周,将数据可视化,包括学习了excel2013的一些高大上的技能,例如数据透视表和 ...

  4. JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

    异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...

  5. 【转】简单十步让你全面理解SQL

    简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...

  6. 大麦盒子(domybox)无法进入系统解决方案!【简单几步】

    大麦无法进入系统解决方案![简单几步]前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由器下的网络! 前提准备:电脑一台盒子控制台软件盒子开机并联网并且盒子和电脑处于同一个路由 ...

  7. 在free bsd上跑JMeter 的 plugin "PerfMon Server Agent"

    在free bsd上跑JMeter 的 plugin "PerfMon Server Agent" 目的: 在free bsd上跑JMeter 的 plugin "Per ...

  8. 如何将新项目添加到github仓库中?只需简单几步~即可实现

    问题描述:新建了一个项目,如何将其设置为git项目?如何关联到github上的仓库? 只需简单几步,但前提是需要已经安装好了git,并且有github账户 本文使用IntelliJ IDEA 其他编辑 ...

  9. 简单三步同步你的 VSCode 用户配置

    https://www.cnblogs.com/knight-errant/p/10444777.html 设备重装,换设备,VSCode 又要重新配置了?不不不,简单三步,让你的 VSCode 配置 ...

  10. 我写的界面,在ARM上跑

    这个...其实,我对ARM了解并不多,我顶多也就算是知道ARM怎么玩,EMMC干啥,MMU干啥,还有早期的叫法,比如那个NorFlash NandFlash ,然后也就没啥了. 然后写个裸机什么的,那 ...

随机推荐

  1. 【Filament】立方体贴图(6张图)

    1 前言 ​ 本文通过一个立方体贴图的例子,讲解三维纹理贴图(子网格贴图)的应用,案例中使用 6 张不同的图片给立方体贴图,图片如下. ​ 读者如果对 Filament 不太熟悉,请回顾以下内容. F ...

  2. 这波操作看麻了!十亿行数据,从71s到1.7s的优化之路。

    你好呀,我是歪歪. 春节期间关注到了一个关于 Java 方面的比赛,很有意思.由于是开源的,我把项目拉下来试图学(白)习(嫖)别人的做题思路,在这期间一度让我产生了一个自我怀疑: 他们写的 Java ...

  3. opencv库图像基础2-python

    opencv库图像基础2-python 图像的简单变换 先导入库 import cv2 import matplotlib.pyplot as plt import numpy as np 1.图像的 ...

  4. Android\C++\C#\Java

    关于:(38条消息) 千万不能错过的Android NDK下载安装及配置_石子君的博客-CSDN博客_android ndk下载 (38条消息) Android扩展知识 - so文件生成及其使用_L- ...

  5. git commit大文件后无法删除或撤回

    可以使用版本回退的功能 先用git log 查看历史提交 用 git reset --soft 上面的编号 回退到历史提交的版本 再重新commit即可

  6. Obsidian 设置快捷键 Ctrl+Shift+J 打开OB(未启动则启动,启动未激活则激活,已激活则最小化)- autoHotKey

    Obsidian 设置快捷键 Ctrl+Shift+J 打开OB(未启动则启动,启动未激活则激活,已激活则最小化)- autoHotKey 需求 将Obsidian作为主笔记软件使用,设置个快捷键,配 ...

  7. 基于恒玄WT250芯片的蓝牙辅听耳机方案调试总结

    前记 在蓝牙辅听领域卷了几年之后.各种型号的蓝牙辅听器都做过.这次,客户需要一款性价比超高的蓝牙辅听器.经过成本以及功能考量的筛选.最终定下来使用wt250来做一款低成本的蓝牙辅听器. 硬件部分 wt ...

  8. day10-面向对象

    面向对象 1.什么是面向对象? 1.1面向过程&&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么-- 面对过程适合处理一些较为简单地问题 面向对象思想 物以类聚,分 ...

  9. openssl 版本兼容问题 备忘录

    第三方依赖openssl,但openssl却有版本不同符号不兼容的问题,由于条件限制不得不使用固定版本的openssl,又或者同时有两个第三方依赖不同版本的openssl,只能靠手动,为了备忘. 1. ...

  10. 瑞云科技联合飞蝶VR教育、大朋VR推出元宇宙 5G VR智慧教育整体解决方案

    近日,瑞云科技3DCAT实时渲染云与飞蝶VR.大朋VR达成深度合作.基于瑞云深度自研的实时渲染云技术.飞蝶VR教育内容资源的深厚积累以及大朋VR优秀的VR硬件产品力,三方针对元宇宙 5G VR智慧教育 ...