From 014ba5492aa18c597a393900c0643357fc9d9fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Wed, 8 Dec 2021 17:50:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 林嘉诚 <425765923@qq.com> --- FA/Entertainment/BombGame/quick_develop.md | 156 +++++++++++++-------- FA/Entertainment/BombGame/readme.md | 19 ++- 2 files changed, 116 insertions(+), 59 deletions(-) diff --git a/FA/Entertainment/BombGame/quick_develop.md b/FA/Entertainment/BombGame/quick_develop.md index 80e3fd12..5dc98991 100644 --- a/FA/Entertainment/BombGame/quick_develop.md +++ b/FA/Entertainment/BombGame/quick_develop.md @@ -2,10 +2,41 @@ ### 简介 -demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设备认证后，用户根据操作提示通过分布式流转实现随机传递炸弹的效果。 +demo基于OpenHarmony系统使用ETS语言进行编写，在邀请用户进行设备认证后，用户根据操作提示完成相应操作，然后通过分布式流转实现随机传递炸弹的效果。 ![show](resources/show.gif) +### 工程目录 + +完整的项目结构目录如下 + +``` +├─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 +``` + ### 开发步骤 #### 1. 新建OpenHarmony ETS项目 @@ -49,50 +80,45 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 ``` 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) - CommonLog.info("onClick") - }) - .gesture( - GestureGroup(GestureMode.Exclusive, - LongPressGesture({ repeat: false }) - .onAction((event: GestureEvent) => { - // 长按 - CommonLog.info("LongPress") - this.judgeGame(RuleType.longPress) - }), - TapGesture({ count: 2 }) - .onAction(() => { - CommonLog.info("double click") - // 双击 - this.judgeGame(RuleType.doubleClick) - }) - ).onCancel(() => { - CommonLog.info("onCancel") - })) - } - }.forceRebuild(false) - }, item => item) - } - .columnsTemplate('1fr 1fr 1fr') - .rowsTemplate('1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .width('90%') - .height('75%') -}.width('80%').height('70%') + 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%') ``` #### 3. 添加弹窗 @@ -101,7 +127,7 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 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](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md)和两个[Image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md)竖向排列组成，所有我们可以在build()下使用[Column](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md)容器来包裹，组件代码如下； +2）规则弹窗效果如下，弹窗组成由两个[Text](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md)和两个[Image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md)竖向排列组成，所以我们可以在build()下使用[Column](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md)容器来包裹，组件代码如下； ![微信图片_20211124151049](resources/rule_dialog.png) @@ -111,7 +137,7 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 controller: CustomDialogController confirm: () => void invite: () => void - @Consume deviceList: RemoteDevice[] + remoteDeviceModel: RemoteDeviceModel build() { Column() { @@ -140,7 +166,6 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 ​ 3）在@entry创建CustomDialogController对象并传入弹窗所需参数，后面可通过该对象open()和close()方法进行打开和关闭弹窗； ``` -@Provide deviceList: RemoteDevice[] = [] private ruleDialog: CustomDialogController = new CustomDialogController({ builder: RuleDialog({ invite: () => this.InvitePlayer(), @@ -162,7 +187,6 @@ private ruleDialog: CustomDialogController = new CustomDialogController({ ``` @State toggle: boolean = true private controller: CustomDialogController -@Consume deviceList: RemoteDevice[] private confirm: () => void private interval = null @@ -189,7 +213,7 @@ build() { } ``` -3）设置动画效果：使用 [animateTo ](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md)显示动画接口炸弹位置切换时添加动画，并且设置定时器定时执行动画； +3）设置动画效果：使用 [animateTo ](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md)显式动画接口炸弹位置切换时添加动画，并且设置定时器定时执行动画； ``` aboutToAppear() { @@ -240,16 +264,22 @@ setBombAnimate() { 项目实现分布式流转只需如下流程： -##### 2.1 创建RemoteDeviceManager实例 +##### 4.1 创建RemoteDeviceManager实例 -声明[@Provide](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md)装饰的设备列表变量deviceList，用于生成设备管理实例RemoteDeviceManager。 +1）导入RemoteDeviceManager + +``` +import {RemoteDeviceManager} from './RemoteDeviceManager' +``` + +2）声明[@Provide](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md)装饰的设备列表变量deviceList，和创建RemoteDeviceManager实例。 ``` @Provide deviceList: RemoteDevice[] = [] private remoteDm: RemoteDeviceManager = new RemoteDeviceManager(this.deviceList) ``` -##### 2.2 刷新设备列表 +##### 4.2 刷新设备列表 在生命周期aboutToAppear中，调用刷新设备列表和开始发现设备。 @@ -262,7 +292,7 @@ aboutToAppear() { } ``` -##### 2.3 设备认证 +##### 4.3 设备认证 ``` invitePlayer(remoteDevice:RemoteDevice) { @@ -278,7 +308,7 @@ invitePlayer(remoteDevice:RemoteDevice) { } ``` -##### 2.4 跨设备流转 +##### 4.4 跨设备流转 从deviceList中获取设备列表在线的设备Id，通过featureAbility.startAbility进行流转。 @@ -307,7 +337,7 @@ async startAbilityRandom() { } ``` -##### 2.5 注销监听 +##### 4.5 注销监听 在声明周期aboutToDisappear进行注销监听。 @@ -384,6 +414,20 @@ gameFail() { } ``` +### 项目下载和导入 + +项目仓库地址：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame + +1）git下载 + +``` +git clone https://gitee.com/openharmony-sig/knowledge_demo_temp.git +``` + +2）项目导入 + +打开DevEco Studio,点击File->Open->下载路径/FA/Entertainment/BombGame + ### 约束与限制 #### 1. 设备编译约束 diff --git a/FA/Entertainment/BombGame/readme.md b/FA/Entertainment/BombGame/readme.md index 0498b031..def5761e 100644 --- a/FA/Entertainment/BombGame/readme.md +++ b/FA/Entertainment/BombGame/readme.md @@ -13,7 +13,7 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 ### 相关链接 -#### [从零开发传炸弹小游戏](quick_develop.md) +[从零开发传炸弹小游戏](quick_develop.md) ### 快速上手 @@ -29,7 +29,21 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 - 配置SDK，参考 [配置OpenHarmony-SDK](https://www.openharmony.cn/pages/00090001/#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6) - DevEco Studio 点击File -> Open 导入本工程 -#### 3. 安装应用 +#### 3. 项目下载和导入 + +项目地址：https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame + +1）git下载 + +``` +git clone https://gitee.com/openharmony-sig/knowledge_demo_temp.git +``` + +2）项目导入 + +打开DevEco Studio,点击File->Open->下载路径/FA/Entertainment/BombGame + +#### 4. 安装应用 - [配置应用签名信息](https://www.openharmony.cn/pages/00090003/#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5%E5%92%8C%E8%AF%81%E4%B9%A6%E8%AF%B7%E6%B1%82%E6%96%87%E4%BB%B6) @@ -52,4 +66,3 @@ demo基于OpenHarmony系统使用ETS语言进行编写，邀请用户进行设 #### 2. 应用内点击邀请玩家进行设备认证 #### 3. 应用内点击开始游戏 - -- Gitee From 3da148a3349c4834ff30042b1f3d7e316065a2d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Wed, 8 Dec 2021 18:12:24 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 林嘉诚 <425765923@qq.com> --- FA/Entertainment/BombGame/quick_develop.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/FA/Entertainment/BombGame/quick_develop.md b/FA/Entertainment/BombGame/quick_develop.md index 5dc98991..e6560248 100644 --- a/FA/Entertainment/BombGame/quick_develop.md +++ b/FA/Entertainment/BombGame/quick_develop.md @@ -137,7 +137,7 @@ demo基于OpenHarmony系统使用ETS语言进行编写，在邀请用户进行 controller: CustomDialogController confirm: () => void invite: () => void - remoteDeviceModel: RemoteDeviceModel + @Consume deviceList: RemoteDevice[] build() { Column() { @@ -166,6 +166,7 @@ demo基于OpenHarmony系统使用ETS语言进行编写，在邀请用户进行 ​ 3）在@entry创建CustomDialogController对象并传入弹窗所需参数，后面可通过该对象open()和close()方法进行打开和关闭弹窗； ``` +@Provide deviceList: RemoteDevice[] = [] private ruleDialog: CustomDialogController = new CustomDialogController({ builder: RuleDialog({ invite: () => this.InvitePlayer(), @@ -187,6 +188,7 @@ private ruleDialog: CustomDialogController = new CustomDialogController({ ``` @State toggle: boolean = true private controller: CustomDialogController +@Consume deviceList: RemoteDevice[] private confirm: () => void private interval = null -- Gitee