青岛网站建设团队,深圳工程建设交易服务中心网站,50个办厂好项目,网络营销平台的优势一、前言
作为一名开发爱好者#xff0c;从大了讲#xff0c;我学习并进行 HarmonyOS 相关开发是为了能为鸿蒙生态建设尽一份绵薄之力#xff0c;从小了讲#xff0c;就是为了自己的兴趣。而万能卡片是一个让我非常感兴趣的东西。 很多时候我跟别人解释什么是万能卡片从大了讲我学习并进行 HarmonyOS 相关开发是为了能为鸿蒙生态建设尽一份绵薄之力从小了讲就是为了自己的兴趣。而万能卡片是一个让我非常感兴趣的东西。 很多时候我跟别人解释什么是万能卡片都会这么说万能卡片能实现让你在不用打开 app 的前提下在桌面上就能使用到相关服务。有一天我的朋友跟我说既然可以体验到各种服务那么能直接在桌面上玩游戏吗 通过对万能卡片相关文档的阅读我认为想要实现一些简单的游戏应该没有问题思考再三我决定做一个井字棋小游戏希望能给各位开发者提供些开发思路。 实现效果如下 可以看到在桌面上有一个 2x2 的小卡片通过两名玩家轮流下棋的方式进行井字棋的博弈结局分为玩家 1 胜利、玩家 2 胜利或者平局看似简单但也实现了朋友提出来的在桌面上玩游戏的要求。
二、基本知识
想要学习这个项目的开发首先我们要掌握以下几个知识 1. HUAWEI DevEco Studio 是开发工具是华为基于 IDEA 开源版本打造的开发平台支持页面预览、多端模拟等功能 2. ArkTS 是目前主推的开发语言简洁的语法规则极大的减少了学习成本 3. 元服务是华为提出的一种新的概念首先一个特点就是不用下载即开即用其次元服务在手机上的表现形式主要是万能卡片通过与万能卡片的交互实现一些功能也可以通过卡片作为类似于 app 的页面入口实现更多的功能最后既然是以万能卡片为入口的其形式就具有多样化的特点可以是 2x2也可以是 1x2、2x4 或者 4x4。
三、项目创建
1. 建立项目
选择Atomic Service即建立一个元服务项目点击Next。 2. 项目目录
这里有几个重要的文件首先是 EntryAbility.ts这个文件对应的是 UIAbility通俗的理解就是当用户想要通过与万能卡片的交互打开一个类似 app 页面的时候那么打开的页面就可以看做是一个 UIAbility接着是 EntryFromAbility.ts这个是卡片的 Ability可以做卡片的数据更新或者与 UIAbility 相关的交互等Index.ets 就是默认打开的页面了而 WidgetCard.ets 则是卡片的页面如果想要设置元服务的标题可以在 AppScope/resources/base/element/string.json 中修改 value 的值。 3. 预览器
展开 Previewer预览器中可以查看页面效果其中 Default 尺寸与大部分手机的实际效果是相同的。可以方便的查看自己的 UI 代码写出来是什么效果也可以测试交互代码非常方便。 四、项目开发
以下操作均是在 WidgetCard.ets 中完成 1. 绘制棋盘
棋盘的绘制分为三个部分
首先是背景图直接在 Column()上进行设置背景代码为 .backgroundImage($r(app.media.back)).backgroundImageSize(ImageSize.Cover)
接着通过循环渲染利用 Flex 布局来绘制格子这里用到了两个知识点1自定义组件
这里的gezi就是一个自定义组件传入 idxnum 这两个参数再绑定上一个 click 事件。 2循环渲染
这里需要在棋盘里显示 9 个gezi组件最简单的办法是写上 9 遍基本同样的代码但是这样既不便于维护也不美观因此可以使用循环渲染的方法。
Flex({wrap:FlexWrap.Wrap}){ ForEach(this.qipan,(item,idx){ gezi({ idx:idx, num:item, click:(){ if(!this.canplay)return; let n 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 方法。
最后再绘制一个结果显示页面使用条件渲染来控制是否显示由于需要覆盖整个页面因此采用了 positionzindex 的写法。 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(); })}
最后效果如下 2. 项目逻辑
井字棋的基本原理非常简单就是在横、竖或者斜线上同一类棋子排成三个即为胜利而且整体只有 9 个格子所以我们可以直接创建一个一维数组代表棋盘 State qipan : Arraynumber [0,0,0, 0,0,0, 0,0,0]
0 代表这个格子没有落子1 代表是X2 代表是O当玩家每次落子后这个数组中相应的数字就会改变同时渲染棋盘。 作为一个简单的小游戏其胜利的情况是有限的几种可以直接将其罗列出来 const win [[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 个格子都填满了却没有触发胜利条件的话则视为平局。
五、总结
万能卡片的潜力实际上是非常巨大的目前市面上我发现大部分的卡片主要用来进行信息的展示还需要在交互或者可玩性上继续挖掘希望这篇文章能给大家带来一点启发期待出现更多好玩的万能卡片。
