写点什么

简单 3 步,OpenHarmony 上跑起 ArkUI 分布式小游戏

  • 2021 年 12 月 13 日
  • 本文字数:8237 字

    阅读完需:约 27 分钟

简单3步,OpenHarmony上跑起ArkUI分布式小游戏

转自: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 游戏界面效果图

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

  • 顶部状态提示栏

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

2)接着依次写入 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)     }  }
复制代码
  • 中间游戏炸弹九宫格区域

1)使用 Grid 网格容器来编写九宫格区域;

2)在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片;

3)在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置;

4)通过 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/js-reference/ts-based-declarative-development-paradigm/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),即可把应用程序流转到另一设备。

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

1)创建 DeviceManager 实例;

2)调用实例的 startDeviceDiscovery(),开始设备发现未信任设备;

3)设置设备状态监听 on('deviceStateChange',callback),监听设备上下线状态;

4)设置设备状态监听 on('deviceFound',callback),监听设备发现;

5)传入未信任设备参数,调用实例 authenticateDevice 方法,对设备进行 PIN 码认证;

6)若是已信任设备,可通过实例的 getTrustedDeviceListSync() 方法来获取设备信息;

7)将设备信息中的 deviceId 传入 featureAbility.startAbility 方法,实现流转;

8)流转接收方可通过 featureAbility.getWant() 获取到发送方携带的数据;

9)注销设备发现监听 off('deviceFound');

10)注销设备状态监听 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. 应用编译约束
用户头像

每一位开发者都是华为要汇聚的星星之火 2021.10.15 加入

提供HarmonyOS关键技术解析、版本更新、开发者实践和活动资讯,欢迎各位开发者加入HarmonyOS生态,一起创造无限可能!

评论

发布
暂无评论
简单3步,OpenHarmony上跑起ArkUI分布式小游戏