转自：OpenAtom OpenHarmony

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

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

├─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 即创建成功。

2. 编写游戏页面

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

• 顶部状态提示栏

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

2. 接着依次写入 Image 包裹的两个 Text 组件；

Stack() {
     Image($r(class="hljs-string">"app.media.title")).objectFit(ImageFit.Contain).height(class="hljs-number">120)
     Column() {
        Text(class="hljs-keyword">this.duration.toString() + class="hljs-string">'ms').fontColor(Color.White)
        Text(class="hljs-keyword">this.touchText).fontColor(Color.White)
     }
  }

• 中间游戏炸dan 九宫格区域

1. 使用 Grid 网格容器来编写九宫格区域；

2. 在 GridItem 中 Stack (容器依次添加方块背景图片和

dan  图片；

3. 在 visibility 属性中用 bombIndex 变量值来决定

dan  显示的位置；

4. 通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件；

Stack() {
   Image($r(<span class="hljs-string">"app.media.background"span>)).objectFit(ImageFit.Contain)
   Grid() {
     ForEach(<span class="hljs-keyword">thisspan>.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">thisspan>.bombIndex == item ? Visibility.Visible : Visibility.Hidden)
             <span class="hljs-comment">// 炸dan点击事件span>
             .onClick((event) => {
               <span class="hljs-comment">// 单击span>
               <span class="hljs-keyword">thisspan>.judgeGame(RuleType.click)
             })
             .gesture(
             GestureGroup(GestureMode.Exclusive,
             LongPressGesture({ repeat: <span class="hljs-literal">falsespan> })
               .onAction((event: GestureEvent) => {
                 <span class="hljs-comment">// 长按span>
                 <span class="hljs-keyword">thisspan>.judgeGame(RuleType.longPress)
               }),
             TapGesture({ count: <span class="hljs-number">2span> })
               .onAction(() => {
                 <span class="hljs-comment">// 双击span>
                 <span class="hljs-keyword">thisspan>.judgeGame(RuleType.doubleClick)
               })
             )
         }
       }.forceRebuild(<span class="hljs-literal">falsespan>)
     }, 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">10span>)
   .rowsGap(<span class="hljs-number">10span>)
   .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）通过

装饰器来创建自定义弹窗，使用方式可参考

自定义弹窗文档：

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

图3 游戏规则

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

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

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

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

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

1）编写弹窗布局：将游戏失败文本、

dan  图片和再来一局按钮图片放置于 Column 容器中；

2）用变量来控制动画起始和结束的位置：用 Flex 容器包裹

dan  图片，并用 @State 装饰变量 toggle，通过变量来动态修改 [Flex]的direction 属性；

@State toggle: boolean = class="hljs-literal">true
private controller: CustomDialogController
@Consume deviceList: RemoteDevice[]
private confirm: () => class="hljs-keyword">void
private interval = class="hljs-literal">null

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

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