共计 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 界面
- 新增工程
在 DevEco Studio 中点击 File -> New Project ->Standard Empty Ability->Next,Language 抉择 ETS 语言,最初点击 Finish 即创立胜利。
图 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)通过 @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 分布式流转
我的项目实现分布式流转只需如下流程:
- 创立 RemoteDeviceManager 实例
1)导入 RemoteDeviceManager
import {RemoteDeviceManager} from ‘./RemoteDeviceManager’
(左右滑动,查看更多)
2)申明 @Provide 装璜的设施列表变量 deviceList,和创立 RemoteDeviceManager 实例。
@Provide deviceList: RemoteDevice[] = []
private remoteDm: RemoteDeviceManager = new RemoteDeviceManager(this.deviceList)
- 刷新设施列表
在生命周期 aboutToAppear 中,调用刷新设施列表和开始发现设施。
aboutToAppear 定义:函数在创立自定义组件的新实例后,在执行其 build 函数之前执行。aboutToAppear() {this.remoteDm.refreshRemoteDeviceList() // 刷新设施列表
this.remoteDm.startDeviceDiscovery() // 开始发现设施}
- 设施认证
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!"})
})
}
- 跨设施流转
从 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);
});
});
}
- 登记监听
在申明周期 aboutToDisappear 进行登记监听。
aboutToDisappear 定义:函数在自定义组件析构耗费之前执行。
aboutToDisappear() {
this.remoteDm.stopDeviceDiscovery() // 登记监听
}
三、编写游戏逻辑
- 开始游戏
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)
}
- 判断输赢
编写判断逻辑,用于不同的点击事件中调用。
/**
* 判断游戏输赢
* @param operation 点击类型
*/
judgeGame(operation:RuleType) {this.stopCountDown()
if (operation != this.ruleText) {this.gameFail()
} else {prompt.showToast({ message: "finish"})
this.bombIndex = -1
this.startAbilityRandom()}
}
- 游戏失败
游戏失败,弹出游戏失败弹框。
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
五、束缚与限度
- 设施编译束缚
获取 OpenHarmony 源码(OpenHarmony 版本须 3.0 LTS 以上):
https://www.openharmony.cn/pa…
装置开发板环境:
https://www.openharmony.cn/pa…
开发板烧录:
https://www.openharmony.cn/pa…
- 利用编译束缚
参考利用开发疾速入门:
https://www.openharmony.cn/pa…
集成开发环境 (DevEco Studio 3.0.0.601 版本以上) 下载地址:
https://developer.harmonyos.c…
OpenHarmony SDK 3.0.0.0 以上;