
标准系统新增支持了方舟开发框架(ArkUI)、分布式组网和 FA 跨设备迁移能力等新特性,因此我们结合了这三种特性使用 ets 开发了一款如下动图所示传炸弹应用。
打开应用在通过邀请用户进行设备认证后,用户须根据提示完成相应操作,然后通过分布式流转实现随机传递炸弹给下一位用户的效果。那么这样一款传炸弹应用如何进行开发呢?
完整的项目结构目录如下:
我们可以分为如下 3 步:编写声明式 UI 界面、添加分布式能力和编写游戏逻辑。
1. 新增工程
在 DevEco Studio 中点击 File -> New Project ->Standard Empty Ability->Next,Language 选择 ETS 语言,最后点击 Finish 即创建成功。
图1 新建工程
2. 编写游戏页面
图2 游戏界面效果图
效果图如上可以分为两部分:
顶部状态提示栏
首先在 @entry 组件入口 build() 中使用 Stack 作为容器,达到图片和文字堆叠的效果;
接着依次写入 Image 包裹的两个 Text 组件;
中间游戏炸弹九宫格区域
使用 Grid 网格容器来编写九宫格区域;
在 GridItem 中 Stack (容器依次添加方块背景图片和炸弹图片;
在 visibility 属性中用 bombIndex 变量值来决定炸弹显示的位置;
通过 onClick 点击事件和 GestureGroup 组合手势加入单击、双击和长按的监听事件;
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 游戏规则
3)在 @entry 创建 CustomDialogController 对象并传入弹窗所需参数,后面可通过该对象 open() 和 close() 方法进行打开和关闭弹窗;
创建游戏失败弹窗,并添加动画效果
图4 游戏失败弹窗动画
1)编写弹窗布局:将游戏失败文本、炸弹图片和再来一局按钮图片放置于 Column 容器中;
2)用变量来控制动画起始和结束的位置:用 Flex 容器包裹炸弹图片,并用 @State 装饰变量 toggle,通过变量来动态修改 [Flex]的direction 属性;
3)设置动画效果:使用 animateTo 显式动画接口炸弹位置切换时添加动画,并且设置定时器定时执行动画;
分布式流转需要在同一网络下通过 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 设备信息列表。
图5 分布式流转
项目实现分布式流转只需如下流程:
1. 创建RemoteDeviceManager实例
1)导入 RemoteDeviceManager
2)声明 @Provide 装饰的设备列表变量 deviceList,和创建 RemoteDeviceManager 实例。
2. 刷新设备列表
在生命周期 aboutToAppear 中,调用刷新设备列表和开始发现设备。
aboutToAppear 定义:函数在创建自定义组件的新实例后,在执行其 build 函数之前执行。
3. 设备认证
4. 跨设备流转
从 deviceList 中获取设备列表在线的设备 Id,通过 featureAbility.startAbility 进行流转。
5. 注销监听
在声明周期 aboutToDisappear 进行注销监听。
aboutToDisappear 定义:函数在自定义组件析构消耗之前执行。
1. 开始游戏
2. 判断输赢
编写判断逻辑,用于不同的点击事件中调用。
3. 游戏失败
游戏失败,弹出游戏失败弹框。
四、项目下载和导入
项目仓库地址:
https://gitee.com/openharmony-sig/knowledge_demo_temp/tree/master/FA/Entertainment/BombGame
1)git下载
2)项目导入
打开 DevEco Studio,点击 File->Open->下载路径/FA/Entertainment/BombGame
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
关注小编,同时可以期待后续文章ing??,不定期分享原创知识。
想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
-
声明:本文由五九快玩攻略网独家原创,未经允许,严禁转载!如有侵权请邮箱联系352082832@qq.com