三消游戏的理解（1）

在学习三消游戏的时候，第一件事情就是给所有的图片都显示在多少行多少列的矩阵中。
先在类外写一个全局的变量；固定好游戏的行数和列数

var GAMEDATA = {
    LINE:8,
    LIST:8,
}

这样就在每次使用的时候就方便自己管理一些数据。然后就是实现一个矩阵

for(var i=0;i<GAMEDATA.LINE;i++){
            for(var j=0;j<GAMEDATA.LIST;j++){
                var sp = new cell();
                this.addChild(sp)
                sp.labels(i,j)
                sp.setPosition(50+i*40,cc.winSize.height-40-j*40)
                this.spArr[i][j] = sp

                //this.spArr.push(sp)
                //cc.log(this.spArr.toString)
            }
        }

这里就是创建一个矩阵。并且给所有的图片按随机出现的规律显示在矩阵中。其中新建的cell类中就是添加随机出现的图片，代码如下：

 this.type = parseInt(1+Math.random()*5);
        this.initWithFile("res/pic_"+this.type+".png");

就是项目文件里面存了有一定命名规律的五章不同的图片。然后设置一个全局的变量使得他为1到5之间的随机数。然后在给这五张图片随机的显示在矩阵中。当然要注意设置每张图片的坐标。

sp.setPosition(50+i*40,cc.winSize.height-40-j*40)

添加了图片之后就要实现一个点击消除的效果。这里当然要用到点击事件。当点击的块就被移除掉。记实现了点击消除的效果。

 //点击事件
        var that = this;
        var listener = cc.EventListener.create({
            event:cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches:true,
            onTouchBegan:function(touch, event){
                var target = event.getCurrentTarget();
                var locationInNode = target.convertToNodeSpace(touch.getLocation());
                var s = target.getContentSize();
                var rect = cc.rect(0,0, s.width, s.height);
                if(cc.rectContainsPoint(rect, locationInNode)){
                    that.removeFromParent(true)
                    cc.eventManager.dispatchCustomEvent(GANMEUSER.USER_TOUCH_EVENT,that.primary)
                    return true;
                }
                return false;
            }
        });
        cc.eventManager.addListener(listener, this);

上面就是点击消除的效果。接下来就是要实现的就是点击之后使块能够往下移动，并且下移的过程中改变上面所有图片的下标。
首先的给每个图片都添加下标。
先在cell类里面写一个方法给每个图片都设置i跟j的值，并且在一开始就用一个全局变量保存起所有i跟j的坐标

labels:function(i,j){
        this.primary = cc.p(i,j)
        this.lable =new cc.LabelTTF(i+"."+j,'',10)
        this.lable.enableStroke(cc.color(0,0,0,255),1)
        this.lable.setPosition(10,10)
        this.addChild(this.lable)
    }

然后在app类面调用这个方法并且传入i跟j 的值

var sp = new cell();
  this.addChild(sp)
 sp.labels(i,j)

点击下移就的在点击消除的位置添加一个自定义事件，并且抛出当前点击的i跟j的坐标。也就是之前创建label方法之前保存的全局变量。在app类里面接收这个传过来的值判断点了之后上面的所有块都要往下落。代码如下 ：

cc.eventManager.addCustomListener(GANMEUSER.USER_TOUCH_EVENT,this.cheskTouch.bind(this));

这是自定义事件的接收方法，this.cheskTouch的回调方法如下：

cheskTouch:function(event){
        var data =event.getUserData();
        cc.log(data.x,data.y)
        var i = data.x
        for(var j=data.y-1;j>=0;j--){
            if(this.spArr[i][j] == null){
                cc.log(i,j)
                continue
            }
            this.spArr[i][j].fallDown();
            var  updataMoveend = this.spArr[i][j].primary
            this.spArr[updataMoveend.x][updataMoveend.y] = this.spArr[i][j]
            this.spArr[i][j] = null;
        }

其中fallDown方法是在cell类里面写的一个移动的方法。代码很简单，就是点击消除的之后使得上面的每一个图片都向下移动一个图片的高度的像素。并且给this.primary = cc.p(i,j)
的y坐标都++。这样就可以实现每次点击之后上面的图片下落。并且下标也改变的效果。

其中应该注意的问题：必须先创建一个二维的数组。并且给所有的图片存在数组里面。这样才能使用自定义事件的回调函数，
还要的就是给每次改变之后的this.primary = cc.p(i,j)的y坐标都要显示到文本框中，这样才能看到改变的值。