[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

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 10
        var bol: boolean;
        //从左侧出发计算
        if(this.card1.pX

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

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

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

二个拐点的情况

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