说明#xff1a;

完成本篇Codelab需要两台开发板#xff0c;一台开发板作为游…介绍

本篇Codelab是基于TS扩展的声明式开发范式编程语言以及OpenHarmony的分布式能力实现的一个手柄游戏。

完成本篇Codelab需要两台开发板一台开发板作为游戏端一台开发板作为手柄端实现如下功能

游戏端呈现飞机移动、发射子弹等效果。

游戏端分布式拉起手柄端FA。

手柄端与游戏端建立连接发送指令给游戏端比如移动飞机发射子弹和释放技能等。

最终效果图如下

完成本篇Codelab我们首先要完成开发环境的搭建本示例以RK3568开发板为例参照以下步骤进行

完成DevEco

Studio的安装和开发环境配置。

开发环境配置完成后请参考使用工程向导创建工程模板选择“Empty

Ability”选择JS或者eTS语言开发。

工程创建完成后选择使用真机进行调测。

分布式组网

本章节以系统自带的音乐播放器为例具体以实际的应用为准介绍如何完成两台设备的分布式组网。

硬件准备准备两台烧录相同的版本系统的RK3568开发板A、B。

开发板A、B连接同一个WiFi网络。

打开设置--WLAN--点击右侧WiFi开关--点击目标WiFi并输入密码。

设备A打开音乐点击左下角流转按钮弹出列表框在列表中会展示远端设备的id。

设备B点击允许设备B将会弹出随机PIN码将设备B的PIN码输入到设备A的PIN码填入框中。

代码结构解读

HandleEtsOpenHarmonyGameEtsOpenHarmony

本篇Codelab只对核心代码进行讲解首先介绍一下整个工程的代码结构

└──

其中HandleEtsOpenHarmony为手柄端工程代码GameEtsOpenHarmony为游戏端工程代码。

HandleEtsOpenHarmony

pages/index.ets应用主页面。

common/images存放图片资源的目录。

ServiceAbility存放ServiceAbility相关文件。

GameEtsOpenHarmony

pages/index.ets应用主页面。

common/images存放图片资源。

model存放获取组网内的设备列表相关文件。

RemoteDeviceModel.ets获取组网内的设备列表。

GameElement.ets游戏端界面元素的实体类用于封装子弹、飞机等元素的属性。

ServiceAbility存放ServiceAbility相关文件。

实现手柄端功能

手柄端有两个功能向游戏端发送指令和实时获取游戏端得分数据。

界面上有三个功能组件蓝色图形组件用于控制游戏端飞机移动方向黄色图形组件用于发射子弹绿色图形组件用于释放技能效果图如下

主要代码如下

{Image(/common/images/bigcircle.png).width(300).height(300)Image(/common/images/smallcircle.png).width(140).height(140).position({

this.smallPosX,

{Image(/common/images/a.png).width(160).height(160).margin({

right:

})Image(/common/images/b.png).width(200).height(200)}.alignItems(VerticalAlign.Bottom)...}}

给摇杆蓝色小圆图形添加TouchEvent动态改变摇杆position属性使摇杆跟随手指移动主要代码如下

onTouchEvent(event:

event.touches[0].screenX;this.startY

event.touches[0].screenY;break;case

event.touches[0].screenX;this.curY

event.touches[0].screenY;this.getSmallCurrentPos(this.curX

this.smallR

Math.round(this.calculateAngle());break;default:break;}

主要代码如下

当手柄端被游戏端拉起时获取游戏端传递的数据游戏端deviceId和分数score。

然后通过deviceId连接游戏端Service主要代码如下

aboutToAppear()

want.parameters.deviceIdconnectRemoteService(remoteDeviceId)}});

}async

featureAbility.connectAbility({deviceId:

deviceId,bundleName:

com.huawei.cookbook,abilityName:

com.huawei.cookbook.ServiceAbility,},{onConnect:

onConnectCallback,onDisconnect:

连接游戏端Service之后摇杆角度angle和操作类型actionType1为发射子弹2为释放技能发送给游戏端主要代码如下

async

rpc.MessageParcel();data.writeInt(actionType);data.writeInt(angle);await

data,

游戏界面主要由玩家飞机、敌机、子弹和道具降落伞等组成由于敌机和子弹都是多个的所以使用ForEach来实现主要代码如下

Entry

{Image(item.imgSrc).width(item.imgWidth).height(item.imgHeight).position({

item.positionX,

item.timestamp.toString())ForEach(this.enemyPlanes,

item

{Image(item.imgSrc).width(item.imgWidth).height(item.imgHeight).position({

item.positionX,

item.timestamp.toString())Image(/common/images/planeOne.png).width(this.planeSize).height(this.planeSize).position({

this.planePosX,

{this.onTouchEvent(event)})Image(/common/images/props.png).width(this.propsSize).height(this.propsSize).position({

this.propsPosX,

})...}.height(100%).width(100%)}

飞机、子弹和道具等元素的移动是通过动态改变Image的position属性来实现的。

使用定时器setInterval每隔16ms重新设置界面元素position属性的值主要实现代码如下

startGame()

that.bullets[i]bullet.positionY

8//

{bulletsTemp.push(bullet)}}that.bullets

bulletsTemp//

that.enemyPlanes[j]enemyPlane.positionY

6//

{enemyPlanesTemp.push(enemyPlane)}}that.enemyPlanes

enemyPlanesTemp//

在setInterval中改变元素位置的时候同时检测元素之间是否发生碰撞子弹和敌机发生碰撞则分数值改变摧毁小飞机加50分摧毁大飞机加100分玩家飞机和道具发生碰撞则道具加1主要实现代码如下

checkCollision()

50sendMessageToRemoteService(that.score)}

else

100sendMessageToRemoteService(that.score)}//

1);i--;enemy.flag

清除被子弹打中敌机that.bullets.splice(j,

1);j--;}}}//

falsethis.bombNumthis.propsPosY

2000}}

点击界面右上角的“电脑”图标调用registerDeviceListCallback()发现设备列表并弹出设备列表选择框DeviceListDialog

主要代码如下

{Text(选择设备).fontWeight(FontWeight.Bold).fontSize(20).margin({

top:

{Text(item).fontSize(12).margin({

top:

{startRemoteAbility(item)this.controller.close();}).padding({

left:

item.toString())}.height(30%).align(Alignment.TopStart)

...}}

com.huawei.cookbook,abilityName:

com.huawei.cookbook.MainAbility,deviceId:

deviceId,parameters:

params};featureAbility.startAbility({want:

{console.info([game]

拉起远端后连接远端serviceconnectRemoteService(deviceId)});

async

(remoteDeviceModel.deviceList.length

{return;}await

featureAbility.connectAbility({deviceId:

deviceId,bundleName:

com.huawei.cookbook,abilityName:

com.huawei.cookbook.ServiceAbility,},{onConnect:

onConnectCallback,onDisconnect:

async

sendMessageToRemoteService(score)

{console.log([game]connectRemoteService

(mRemote

rpc.MessageParcel();data.writeInt(score);await

data,

通过Service接收手柄端数据然后使用CommonEvent模块将数据发送给FA主要代码如下

class

data.readInt();reply.writeInt(100);var

params

com.huawei.cookbook,parameters:

function

发布公共事件commonEvent.publish(publish_action,

options,

订阅公共事件接收从Service发送的公共事件数据actionType

为飞机移动的角度。

接收到数据后执行手柄端发送的指令移动玩家飞机、发射子弹和释放技能摧毁所有敌机主要代码如下

subscribeEvent()

data.parameters.actionType;that.angle

(that.actionType

{that.bombNum--that.destroyAllEnemy()}}if

(that.angle

{that.movePlaneByHandle()}}//创建订阅者回调function

data)

data;//订阅公共事件commonEvent.subscribe(subscriber,

SubscribeCallBack);}//创建订阅者commonEvent.createSubscriber(subscribeInfo,

恭喜您

通过CommonEvent发布与订阅实现Service和FA之间通信。

为了帮助大家更深入有效的学习到鸿蒙开发知识点小编特意给大家准备了一份全套最新版的HarmonyOS

NEXT学习资源获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频

鸿蒙语法ArkTS、TypeScript、ArkUI等.....视频教程

鸿蒙生态应用开发白皮书V2.0PDF

获取白皮书完整版方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

(Harmony

应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言……

五、基于ArkTS

Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background

Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列……

(Harmony