简单3步，OpenHarmony上跑起ArkUI分布式小游戏精华

HarmonyOS开发者

发布于 2021-12-13 16:43

浏览

6收藏

最新收录于

ArkUI应用界面开发

查看专栏

转自：OpenAtom OpenHarmony

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

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

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

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

├─entry
│  └─src
│      └─main
│          │  config.json // 应用配置
│          │
│          ├─ets
│          │  └─MainAbility
│          │      │  app.ets //ets应用程序主入口
│          │      │
│          │      └─pages
│          │              CommonLog.ets // 日志类
│          │              game.ets // 游戏首页
│          │              RemoteDeviceManager.ets // 设备管理类
│          │
│          └─resources // 静态资源目录
│              ├─base
│              │  ├─element
│              │  │
│              │  ├─graphic
│              │  ├─layout
│              │  ├─media // 存放媒体资源
│              │  │
│              │  └─profile
│              └─rawfile1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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

一、编写声明式UI界面

1. 新增工程

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

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

图1 新建工程

2. 编写游戏页面

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

图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)
     }
  }1.
2.
3.
4.
5.
6.
7.

中间游戏炸弹九宫格区域

使用 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>)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

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步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

图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)
      }
   }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

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>
})1.
2.
3.
4.
5.
6.
7.
8.
9.

创建游戏失败弹窗，并添加动画效果

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

图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)
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

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>)
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

二、添加分布式流转

分布式流转需要在同一网络下通过 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 设备信息列表。

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

图5 分布式流转

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

1. 创建RemoteDeviceManager实例

1）导入 RemoteDeviceManager

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

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

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

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>
}1.
2.
3.
4.

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> })
  })
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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);
    });
  });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

5. 注销监听

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

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

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

三、编写游戏逻辑

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)
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

2. 判断输赢

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

/**
 * 判断游戏输赢
 * @param operation 点击类型
 */
judgeGame(operation:RuleType) {
   this.stopCountDown()
   if (operation != this.ruleText) {
      this.gameFail()
   } else {
      prompt.showToast({ message: "finish" })
      this.bombIndex = -1
      this.startAbilityRandom()
   }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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()
}1.
2.
3.
4.
5.
6.
7.

四、项目下载和导入

项目仓库地址：

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>1.

2）项目导入

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

五、约束与限制

1. 设备编译约束

获取OpenHarmony源码(OpenHarmony 版本须 3.0 LTS 以上)：https://www.openharmony.cn/pages/0001000202/#%E5%AE%89%E8%A3%85%E5%BF%85%E8%A6%81%E7%9A%84%E5%BA%93%E5%92%8C%E5%B7%A5%E5%85%B7
安装开发板环境：https://www.openharmony.cn/pages/0001000400/#hi3516%E5%B7%A5%E5%85%B7%E8%A6%81%E6%B1%82
开发板烧录：https://www.openharmony.cn/pages/0001000401/#%E4%BD%BF%E7%94%A8%E7%BD%91%E5%8F%A3%E7%83%A7%E5%BD%95

2. 应用编译约束

参考应用开发快速入门：https://www.openharmony.cn/pages/00090000/
集成开发环境(DevEco Studio 3.0.0.601版本以上)下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta
OpenHarmony SDK 3.0.0.0 以上；

简单3步，OpenHarmony上跑起ArkUI分布式小游戏-鸿蒙开发者社区

分类

标签

已于2023-4-21 16:37:18修改

4条回复

按时间正序

按时间倒序

入门大师小波哥

666

2021-12-13 19:24:33

HarmonyOS开发者回复了入门大师小波哥

666

欢迎围观学习~

2021-12-14 09:12:18

意甲七姐妹

请问下，实现分布式流转必须使用ets吗，如果用arkui中传统的类web的js语法，是不是无法直接实现分布式，必须借助Java?

2022-1-4 20:37:54

HarmonyOS开发者回复了意甲七姐妹

请问下，实现分布式流转必须使用ets吗，如果用arkui中传统的类web的js语法，是不是无法直接实现分布式，必须借助Java?

您好，这一类HarmonyOS开发问题，建议您在HarmonyOS官方论坛（传送门：https://developer.huawei.com/consumer/cn/forum/block/application）发帖提问哈，HarmonyOS论坛有专门的华为资深工程师为大家解答开发问题，可以给您更准确、专业的回复噢。

2022-1-6 10:53:34

51CTO

51CTO博客

51CTO学堂

简单3步，OpenHarmony上跑起ArkUI分布式小游戏精华

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

简单3步，OpenHarmony上跑起ArkUI分布式小游戏 精华

订阅鸿蒙技术特刊，精选内容抢先看

简单3步，OpenHarmony上跑起ArkUI分布式小游戏精华