一、前言

作为一名开发爱好者，从大了讲，我学习并进行 HarmonyOS 相关开发是为了能为鸿蒙生态建设尽一份绵薄之力，从小了讲，便是为了自己的兴趣。而全能卡片是一个让我十分感兴趣的东西。

许多时分我跟别人解释什么是全能卡片，都会这么说：”全能卡片能完成让你在不必翻开 app 的前提下，在桌面上就能使用到相关服务”。有一天，我的朋友跟我说，已然能够体验到各种服务，那么能直接在桌面上玩游戏吗？

经过对全能卡片相关文档的阅览，我以为想要完成一些简略的游戏应该没有问题，思考一再，我决议做一个井字棋小游戏，期望能给各位开发者提供些开发思路。

完成作用如下：

HarmonyOS 开发事例共享：全能卡片也能用来玩游戏

能够看到，在桌面上有一个 2×2 的小卡片，经过两名玩家轮番下棋的方式，进行井字棋的博弈，结局分为玩家 1 成功、玩家 2 成功或许平局，看似简略，但也完成了朋友提出来的”在桌面上玩游戏”的要求。

二、基本常识

想要学习这个项目的开发，首要咱们要掌握以下几个常识：

1.HUAWEIDevEcoStudio 是开发工具，是华为根据 IDEA 开源版别打造的开发平台，支持页面预览、多端模拟等功用；

2.ArkTS 是现在主推的开发语言，简洁的语法规矩极大的减少了学习成本；

3. 元服务是华为提出的一种新的概念，首要一个特色便是不必下载，即开即用；其次，元服务在手机上的表现方式，主要是全能卡片，经过与全能卡片的交互完成一些功用，也能够经过卡片作为类似于 app 的页面进口完成更多的功用；最终，已然是以全能卡片为进口的，其方式就具有多样化的特色，能够是 2×2，也能够是 1×2、2×4 或许 4×4。

三、项目创立

1.树立项目

挑选”AtomicService”即树立一个元服务项目，点击”Next”。

HarmonyOS 开发事例共享：全能卡片也能用来玩游戏

2.项目目录

这儿有几个重要的文件，首要是 EntryAbility.ts，这个文件对应的是 UIAbility，浅显的理解便是，当用户想要经过与全能卡片的交互翻开一个类似 app 页面的时分，那么翻开的页面就能够看做是一个 UIAbility；接着是 EntryFromAbility.ts，这个是卡片的 Ability，能够做卡片的数据更新，或许与 UIAbility 相关的交互等；Index.ets 便是默认翻开的页面了；而 WidgetCard.ets 则是卡片的页面；如果想要设置元服务的标题，能够在 AppScope/resources/base/element/string.json 中修改 value 的值。

HarmonyOS 开发事例共享：全能卡片也能用来玩游戏

3.预览器

打开 Previewer，预览器中能够查看页面作用，其间 Default 尺度与大部分手机的实际作用是相同的。能够便利的查看自己的 UI 代码写出来是什么作用，也能够测验交互代码，十分便利。

HarmonyOS 开发事例共享：全能卡片也能用来玩游戏

四、项目开发

以下操作均是在 WidgetCard.ets 中完成：

1.制作棋盘

棋盘的制作分为三个部分：

首要是布景图，直接在 Column()上进行设置布景，代码为：

.backgroundImage($r('app.media.back'))
.backgroundImageSize(ImageSize.Cover)

接着经过循环烘托，使用 Flex 布局来制作格子，这儿用到了两个常识点：（1）自定义组件

这儿的”gezi”便是一个自定义组件，传入 idx，num 这两个参数，再绑定上一个 click 事情。

（2）循环烘托

这儿需要在棋盘里显现 9 个”gezi”组件，最简略的办法是写上 9 遍基本同样的代码，但是这样既不便于维护，也不美观，因此能够使用循环烘托的办法。

Flex({wrap:FlexWrap.Wrap}){
ForEach(this.qipan,(item,idx)=>{
gezi({
idx:idx,
num:item,
click:()=>{
if(!this.canplay)return;
letn=this.qipan[idx];
if(n>0)return;
this.qipan[idx]=this.shunxv;
this.shunxv=this.shunxv==1?2:1;
//查看
this._Check();
}
})
})
}.width(35*3)
.height(35*3)

然后创立下方的两个小图标，”刷新”用来重置棋盘，而”信息”用来点击进入小游戏的阐明页。这儿对于页面的跳转，使用的是 postCardAction 办法。

最终再制作一个成果显现页面，使用条件烘托来控制是否显现，由于需要掩盖整个页面，因此采用了 position zindex 的写法。

if(this.resshow){
//这儿制作一个成果提示页面
Column(){
Text(this.res).fontSize(20).fontColor('white')
}
.backgroundColor('rgba(0,0,0,0.3)')
.height('100%')
.width('100%')
.position({x:0,y:0})
.zIndex(1)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(()=>{
this._Init();
})
}

最终作用如下：

HarmonyOS 开发事例共享：全能卡片也能用来玩游戏

2.项目逻辑

井字棋的基本原理十分简略，便是在横、竖或许斜线上，同一类棋子排成三个即为成功，而且全体只有 9 个格子，所以咱们能够直接创立一个一维数组代表棋盘：

@Stateqipan:Array<number>=
[0,0,0,
0,0,0,
0,0,0]

0 代表这个格子没有落子，1 代表是”X”，2 代表是”O”，当玩家每次落子后，这个数组中相应的数字就会改变，一起烘托棋盘。

作为一个简略的小游戏，其成功的状况是有限的几种，能够直接将其罗列出来：

constwin=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

简略解释一下，比方第一个[0,1,2]，指的便是，当棋盘数组的第 0 位、第 1 位和第 2 位，这三个数字相一起，阐明有一个玩家胜出了。

每次落子后执行_Check 办法，对成功的每一种状况进行循环，查看当前棋盘是否契合其间的恣意一种成功条件，当然还有一个条件，那便是要把 0 扫除在成功条件外，由于 0 代表的是没有落子。如果 9 个格子都填满了，却没有触发成功条件的话，则视为平局。

五、总结

全能卡片的潜力实际上是十分巨大的，现在市面上我发现大部分的卡片主要用来进行信息的展示，还需要在”交互”或许”可玩性”上持续挖掘，期望这篇文章能给我们带来一点启示，等待出现更多好玩的全能卡片。