关于harmonyos:简单3步OpenHarmony上跑起ArkUI分布式小游戏

33次阅读

共计 7499 个字符,预计需要花费 19 分钟才能阅读完成。

在 9 月 30 日更新的 OpenHarmony3.0 LTS 上,规范零碎新增反对了方舟开发框架(ArkUI)、分布式组网和 FA 跨设施迁徙能力等新个性,因而咱们联合了这三种个性应用 ets 开发了一款如下视频所示传炸弹利用。

https://v.qq.com/x/page/v3313…

刷新
关上利用在通过邀请用户进行设施认证后,用户须依据提醒实现相应操作,而后通过分布式流转实现随机传递炸弹给下一位用户的成果。

那么这样一款传炸弹利用如何进行开发呢?

残缺的我的项目构造目录如下:

├─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 新建工程

  1. 编写游戏页面

图 2 游戏界面效果图

效果图如上能够分为两局部:
顶部状态提醒栏

1)首先在 @entry 组件入口 build() 中应用 Stack 作为容器,达到图片和文字重叠的成果;2)接着顺次写入 Image 包裹的两个 Text 组件;Stack() {Image($r("app.media.title")).objectFit(ImageFit.Contain).height(120)
    Column() {Text(this.duration.toString() + 'ms').fontColor(Color.White)
       Text(this.touchText).fontColor(Color.White)
    }
 }

两头游戏炸弹九宫格区域

1)应用 Grid 网格容器来编写九宫格区域;
2)在 GridItem 中 Stack (容器顺次增加方块背景图片和炸弹图片;
3)在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的地位;
4)通过 onClick 点击事件和 GestureGroup 组合手势退出单击、双击和长按的监听事件;

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

创立规定游戏弹窗

1)通过 @CustomDialog 装璜器来创立自定义弹窗,应用形式可参考
自定义弹窗文档:
https://gitee.com/openharmony…

2)规定弹窗成果如下,弹窗组成由两个 Text 和两个 Image 竖向排列组成,所以咱们能够在 build()下应用 Column 容器来包裹,组件代码如下;

图 3 游戏规则

@CustomDialog
struct RuleDialog {
   controller: CustomDialogController
   confirm: () => void
   invite: () => void
   @Consume deviceList: RemoteDevice[]

   build() {Column() {Text('游戏规则').fontSize(30).margin(20)
         Text('炸弹会随机呈现在 9 个方块内, 须要在规定工夫内实现指定操作(点击、双击或长按), 即可将炸弹传递给下一个人, 小心炸弹可是会越来越快的喔!')
            .fontSize(24).margin({bottom: 10})
         Image($r("app.media.btn_start")).objectFit(ImageFit.Contain).height(80).margin(10)
            .onClick(() => {console.info(TAG + 'Click start game')
               if (checkTrustedDevice(this.remoteDeviceModel)) {this.controller.close()
                  this.confirm()}
            })
         Image($r("app.media.btn_Invite")).objectFit(ImageFit.Contain).height(80).margin(10)
            .onClick(() => {this.invite()
            })
      }.width('90%')
      .margin(20)
      .backgroundColor(Color.White)
   }
}

3)在 @entry 创立 CustomDialogController 对象并传入弹窗所需参数,前面可通过该对象 open() 和 close() 办法进行关上和敞开弹窗;

@Provide deviceList: RemoteDevice[] = []
private ruleDialog: CustomDialogController = new CustomDialogController({
   builder: RuleDialog({invite: () => this.InvitePlayer(),
      confirm: () => this.startGame(),
      deviceList: this.deviceList
   }),
   autoCancel: false
})

创立游戏失败弹窗,并增加动画成果

图 4 游戏失败弹窗动画

1)编写弹窗布局:将游戏失败文本、炸弹图片和再来一局按钮图片搁置于 Column 容器中;
2)用变量来管制动画起始和完结的地位:用 Flex 容器包裹炸弹图片,并用 @State 装璜变量 toggle,通过变量来动静批改 [Flex]的 direction 属性;

@State toggle: boolean = true
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => void
private interval = null

build() {Column() {Text('游戏失败').fontSize(30).margin(20)
      Flex({
         direction: this.toggle ? FlexDirection.Column : FlexDirection.ColumnReverse,
         alignItems: ItemAlign.Center
      })
      {Image($r("app.media.bomb")).objectFit(ImageFit.Contain).height(80)
      }.height(200)

      Image($r("app.media.btn_restart")).objectFit(ImageFit.Contain).height(120).margin(10)
         .onClick(() => {this.controller.close()
               this.confirm()})
   }
   .width('80%')
   .margin(50)
   .backgroundColor(Color.White)
}

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

aboutToAppear() {this.setBombAnimate()
}

setBombAnimate() {let fun = () => {this.toggle = !this.toggle;}
   this.interval = setInterval(() => {animateTo({ duration: 1500, curve: Curve.Sharp}, fun)
   }, 1600)
}

二、增加分布式流转

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

本来分布式流转利用流程如下:

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 ‘./RemoteDeviceManager’
(左右滑动,查看更多)
2)申明 @Provide 装璜的设施列表变量 deviceList,和创立 RemoteDeviceManager 实例。
@Provide deviceList: RemoteDevice[] = []
private remoteDm: RemoteDeviceManager = new RemoteDeviceManager(this.deviceList)

  1. 刷新设施列表

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

aboutToAppear 定义:函数在创立自定义组件的新实例后,在执行其 build 函数之前执行。aboutToAppear() {this.remoteDm.refreshRemoteDeviceList() // 刷新设施列表
  this.remoteDm.startDeviceDiscovery() // 开始发现设施}
  1. 设施认证
invitePlayer(remoteDevice:RemoteDevice) {if (remoteDevice.status == RemoteDeviceStatus.ONLINE) {prompt.showToast({ message: "Already invited!"})
    return
  }
  this.remoteDm.authDevice(remoteDevice).then(() => {prompt.showToast({ message: "Invite success! deviceName=" + remoteDevice.deviceName})
  }).catch(() => {prompt.showToast({ message: "Invite fail!"})
  })
}
  1. 跨设施流转

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

async startAbilityRandom() {let deviceId = this.getRandomDeviceId() // 随机获取设施 id
  CommonLog.info('featureAbility.startAbility deviceId=' + deviceId);
  let bundleName = await getBundleName()
  let wantValue = {
    bundleName: bundleName,
    abilityName: 'com.sample.bombgame.MainAbility',
    deviceId: deviceId,
    parameters: {
      ongoing: true,
      transferNumber: this.transferNumber + 1
    }
  };
  featureAbility.startAbility({want: wantValue}).then((data) => {CommonLog.info('featureAbility.startAbility finished,' + JSON.stringify(data));
    featureAbility.terminateSelf((error) => {CommonLog.info('terminateSelf finished, error=' + error);
    });
  });
}
  1. 登记监听

在申明周期 aboutToDisappear 进行登记监听。

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

aboutToDisappear() {
this.remoteDm.stopDeviceDiscovery() // 登记监听
}

三、编写游戏逻辑

  1. 开始游戏
startGame() {CommonLog.info('startGame');
  this.randomTouchRule() // 随机游戏点击规定
  this.setRandomBomb() // 随机生成炸弹地位
  this.stopCountDown() // 进行倒计时
  if (this.transferNumber < 10) {this.duration = 3000 - this.transferNumber * 100} else {this.duration = 2000}
  const interval: number = 500
  // 开始倒计时
  this.timer = setInterval(() => {if (this.duration <= interval) {
      this.duration = 0
      clearInterval(this.timer)
      this.timer = null
      this.gameFail()} else {this.duration -= interval}
  }, interval)
}
  1. 判断输赢

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

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

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

gameFail() {
  prompt.showToast({message: 'Game Fail'})
  CommonLog.info('gameFail');
  this.gameFailDialog.open()}

四、我的项目下载和导入

我的项目仓库地址:
https://gitee.com/openharmony…

1)git 下载

git clone https://gitee.com/openharmony-sig/knowledge_demo_temp.git

2)我的项目导入

关上 DevEco Studio,点击 File->Open-> 下载门路 /FA/Entertainment/BombGame

五、束缚与限度

  1. 设施编译束缚

获取 OpenHarmony 源码(OpenHarmony 版本须 3.0 LTS 以上):
https://www.openharmony.cn/pa…

装置开发板环境:
https://www.openharmony.cn/pa…
开发板烧录:
https://www.openharmony.cn/pa…

  1. 利用编译束缚

参考利用开发疾速入门:
https://www.openharmony.cn/pa…
集成开发环境 (DevEco Studio 3.0.0.601 版本以上) 下载地址:
https://developer.harmonyos.c…
OpenHarmony SDK 3.0.0.0 以上;

正文完
 0