[Egret] 对对碰H5小游戏

游戏界面大致是这样（很丑，但是有内涵）：

【第一步：UI界面】

【第二步：程序结构】

这个结构相对上一篇贪吃蛇更简单，因为没有控制UI层了

Card：就是每个图片框

Main：是程序的主入口，资源配置和游戏的启动

StartGame:是游戏的入口，里面包含了连连看的一些连线算法，因为是年前给同事做的简单教材，所以就没有细分程序逻辑了

【第三步：部分代码】

Main.ts 这个类，上一篇文章有简单介绍，基本是程序自动生成默认的，就多了一个StartGame的引入

private createGameScene():void{  this.addChild(new StartGame());
}

StartGame.ts

这个是连连看的主类，也简单，里面就2个关键点需要注意

（1）因为连连看，是以一对对应类型的卡片而存在的，所以生成的时候，就要注意，就1个类型有2个卡片这种关系形式而存在。

（2）就是连连看的算法，玩过类似游戏的就明白，卡片可以消亡，有几种连线方式：

一：直线连线，即没有一个拐点

二：只有一个拐点的连线

三：最多只有2个拐点的连线

明白上述的关键因素之后，我们就对（1）（2）两个关键点的代码分析了：

（1）初始化卡片的代码

private createCard():void{var total:number = this.cardXNum*this.cardYNum;var addTimes:number = total*.5;this.cardArr        = new eui.ArrayCollection();for(var i:number=0;i<addTimes;i++){var random: number = Math.random() * this.cartType;var cartType: number = 1 + Math.floor(random);this.cardArr.addItem(cartType);this.cardArr.addItem(cartType);}this.cardArr = this.getRandomArr();//var addCardID:number = 0;var showX:number     = 0;var showY:number     = 0;this.hitArr = new eui.ArrayCollection();for(var a: number = 0;a < this.cardXNum ;a++) {var hitYArr = new eui.ArrayCollection();for(var b: number = 0;b < this.cardYNum;b++) {var card = new Card();card.touchEnabled = true;card.typeId = this.cardArr.getItemAt(addCardID);card.pX     = a;card.pY     = b;card.x      = showX;card.y      = showY;this.box.addChild(card);showY += this.cardSize;addCardID++;card.addEventListener(egret.TouchEvent.TOUCH_TAP,this.cardClick,this);hitYArr.addItem(card);}this.hitArr.addItem(hitYArr);showX += this.cardSize;showY = 0;}}

1.cardXNum ,cardYNum 和上一篇贪吃蛇一样，就是X，Y左边方向，所允许的最多的卡片个数

2.var addTimes:number = total*.5; 这个就是将总个数/2，得到一半类型的卡片数

3.this.cardArr = this.getRandomArr(); 就是将得到的类型数组打乱，得到混乱类型的卡片

4.后面的代码基本上就是位置排列了

5.每个卡片有一个touchEnabled的属性，用来标识是否可以点击

（2）连连看的算法

主要逻辑代码：

private startCheck():void{this.myTimer.stop();//连连看算法this.card1 = this.chooseArr.getItemAt(0) as Card;this.card2 = this.chooseArr.getItemAt(1) as Card;//首先两个对象要是同样的类型if(this.card1.typeId != this.card2.typeId) {this.hideItem();return;}var minX: number = Math.min(this.card1.pX,this.card2.pX);var minY: number = Math.min(this.card1.pY,this.card2.pY);var maxX: number = Math.max(this.card1.pX,this.card2.pX);var maxY: number = Math.max(this.card1.pY,this.card2.pY);var canLinkBol:boolean = false;//没有拐点的情况canLinkBol = this.checkNoConer(minX,maxX,minY,maxY);console.log("******anLinkBol1******",canLinkBol);if(canLinkBol){this.removeItem();return;}//1个拐点情况canLinkBol = this.checkOneConer(minX,maxX,minY,maxY);console.log("******canLinkBol2******",canLinkBol);if(canLinkBol){this.removeItem();return;}//2个拐点情况canLinkBol = this.checkTwoConer(minX,maxX,minY,maxY);console.log("******canLinkBol3******",canLinkBol);if(canLinkBol) {this.removeItem();return;}this.hideItem();}

以为有了上面的思路，所以逻辑代码也是按这个思路去划分函数功能

直线连线（没有拐点的情况）：分两种，X方向和Y方向

private checkNoConer(minX:number,maxX:number,minY:number,maxY:number):boolean{//console.log("checkNoConer",minX,minY,maxX,maxY);//同一个方向的判断if(minX == maxX || minY == maxY) {var n: number;var touchEnabled: boolean;var card:Card;//紧挨一起的情况if(Math.abs(minX + minY - maxX-maxY)==1){console.log("紧挨一起的情况");return true;}//x一样的情况，竖向检测if(minX == maxX) {return this.checkYBol(minX,minY,maxY);}else{//y一样的情况    return this.checkXBol(minY,minX,maxX);}}return false;}

代码很简单，就是得到两个卡片的左边数据后，去判断x,或y左边是否有一个是一样的，只有这样才能进入后面的判断逻辑

我是尽量将每个判断逻辑抽出来做为一个独立的函数去处理，分的比较细，也方便教学培训使用

大家可以看到有checkYBol和checkXBol的函数，就是检查Y或X坐标方向是否满足连线条件

一个拐点的情况

private checkOneConer(minX: number,maxX: number,minY: number,maxY: number): boolean {console.log("checkOneConer",minX,minY,maxX,maxY);//checkOneConer 1 9 4 10var bol: boolean;//从左侧出发计算if(this.card1.pX<this.card2.pX){if(this.card1.pY < this.card2.pY){//先竖后横bol = this.checkYBol(minX,minY,maxY);console.log("bol1",bol)if(bol) {bol = this.checkXBol(maxY,minX,maxX);}if(bol) return bol;//先横后竖bol = this.checkXBol(minY,minX,maxX);if(bol) {bol = this.checkYBol(maxX,minY,maxY);}}else{//先竖后横bol = this.checkYBol(minX,minY,maxY);console.log("bol1",bol)if(bol) {bol = this.checkXBol(minY,minX,maxX);}if(bol) return bol;//先横后竖bol = this.checkXBol(maxY,minX,maxX);if(bol) {bol = this.checkYBol(maxX,minY,maxY);}}}else{if(this.card1.pY < this.card2.pY) {//先竖后横bol = this.checkYBol(maxX,minY,maxY);console.log("bol1",bol)if(bol) {bol = this.checkXBol(maxY,minX,maxX);}if(bol) return bol;//先横后竖bol = this.checkXBol(minY,minX,maxX);if(bol) {bol = this.checkYBol(minX,minY,maxY);}} else {//先竖后横bol = this.checkYBol(maxX,minY,maxY);console.log("bol1",bol)if(bol) {bol = this.checkXBol(minY,minX,maxX);}if(bol) return bol;//先横后竖bol = this.checkXBol(maxY,minX,maxX);if(bol) {bol = this.checkYBol(minX,minY,maxY);}}}return bol;}

上面的代码还是累赘比较多，没有做优化，我还是那句话，为了方便教学和培训

我是从卡片位置关系来做逻辑处理的，从而确定连线的走势图，这个为什么要这么做，主要是可以得到一个连线走势数据，可以做对应的动画效果

逻辑也很简单，我也有注释，然后将拐点的走势拆分，就又回到了第一步，单方向连线的逻辑处理了

二个拐点的情况

就是在一个拐点的基础上，再多了一个判断关系，上面是一层层相扣的，为了提升大家的研究兴趣，这部分稍后再放出来。不要骂我

[Egret] 对对碰H5小游戏相关推荐

h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
html5 游戏制作软件,制作h5小游戏的免费软件有哪些？
刚刚过去的618,过段时间要来临的双十一.这些个节日无一不是商家做营销的噱头,各大电商平台也不会放过这么多机会来做商品宣传的.既然人家都要做活动了,不捧场怎么能行,我们要一起做一个买买买的精致猪猪女孩 ...
用Three.js写h5小游戏-3d飞机大战
用Three.js写h5小游戏-飞机大战博主的话运行图片目录路径![在这里插入图片描述](https://img-blog.csdnimg.cn/20190829103702978.jpg?x- ...
H5小游戏 - canvas涂鸦板
H5小游戏 - 涂鸦板效果截图: html代码如下: <!DOCTYPE html> <html><head><meta charset="utf ...
Unity对H5小游戏开发的支持——Project Tiny
随着微信小游戏跳一跳的大火,游戏市场对于H5小游戏的开发逐渐火爆,作为一名Unity游戏开发从业者,大家对于Unity中开发小游戏的支持也很关注!近日Unity官方发布了Project Tiny ...
小游戏开发小程序app游戏开发 H5小游戏开发
目前有很多人对小游戏的理解都不同,有的人认为小游戏是H5嵌入形式的,也有的人认为小游戏是就几兆的程序其实大家认为的都是正确的,没有任何问题.那么今天给大家讲下小游戏之间的区别 1.H5小游戏嵌入:这 ...
html5制作端午节游戏,意派Epub360怎么制作一个端午节H5小游戏页面？
六月已经过了三分之一,"粽子节"也马上要到了,每当这时候,又到新媒体运营人和设计师头秃的时刻,在传统的节日里,如何把传统的节日使用互联网元素表现,让更多的年轻人能够参与进来,H5这 ...
android h5游戏图片不缓存,H5小游戏资源缓存方法与流程
本发明涉及H5资源缓存领域,尤其涉及H5小游戏资源缓存方法. 背景技术: 随着移动互联网的发展和手机硬件性能的不断提升,H5小游戏这种不需要下载安装即可使用的全新游戏应用得到了爆发式发展.这种用完即走 ...
“倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...

[Egret] 对对碰H5小游戏

[Egret] 对对碰H5小游戏相关推荐

最新文章

热门文章