cocos2d_js 拼图游戏源码（点击移动版）

recrouse.js

var res = {
    pt1_url:"res/pt_1.jpg",
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

app.js

var H_NUM = 3;
var W_NUM = 3;
var CLICK_CELL_EVENT = "click_cell_event";  //自定义事件名

var HelloWorldLayer = cc.Layer.extend({
    //碎片数组
    arrCellSpr:[],
    //大图路径
    basePicUrl:null,
    //大图精灵
    baseSpr:null,
    //碎片高
    hei:null,
    //碎片宽
    wid:null,
    //胜利文本
    winLab:null,
    //游戏是否开始标签
    isStart:false,

    ctor:function () {
        this._super();
        this._init();
        return true;
    },

    //初始化
    _init:function()
    {
        var _winsize = cc.winSize;
        this.winLab = new cc.LabelTTF("You Win","Arial", 88);  //创建游戏胜利文本
        this.winLab.attr({     //批量设置文本节点属性
            anchorX:0.5,
            anchorY:0.5,
            x:_winsize.width/2,
            y:_winsize.height/2,
        })
        this.addChild(this.winLab,3);     //层级设置比碎片高，否则会被碎片挡住导致无法正常显示
        this.winLab.setVisible(false);    //设置不可见
        this.basePicUrl = res. pt1_url;
        this.baseSpr = new cc.Sprite(this.basePicUrl);
        this.wid = this.baseSpr.width/W_NUM.toFixed(5) - 0.00001;
        this.hei = this.baseSpr.height/H_NUM.toFixed(5) - 0.00001;
        var basePosition = cc.p((_winsize.width - this.baseSpr.width + this.wid)/2, (_winsize.height + this.baseSpr.height - this.hei)/2);
        var cell;
        for(var i = 0;i<H_NUM;i++)
        {
            this.arrCellSpr[i] = [];
            for(var j = 0;j<W_NUM;j++)
            {
                var pos = cc.p(basePosition.x + j*this.wid,basePosition.y -  i*this.hei)
                cell = new CellSpr(this.basePicUrl, cc.rect(j*this.wid, i*this.hei, this.wid, this.hei),pos );  //按矩形裁剪图片素材创建精灵
                cell.setPosition(pos);   //设置碎片坐标
                this.addChild(cell);
                this.arrCellSpr[i][j] = cell;   //添加到数组
            }
        }
        this.arrCellSpr[i - 1][j - 1].opacity = 0;  //左下角设置为透明
        this._addCustomEvent();
        this.scheduleOnce(this._startGame,0);   //一次性计时器
    },

    //添加自定义事件
    _addCustomEvent:function()
    {
        var that = this;
        cc.eventManager.addCustomListener(CLICK_CELL_EVENT,function(event){
            var cell = event.getUserData();
            var arr = that._getIndexInArr(cell);
            that._checkNeighbor(arr[0],arr[1]);
        })
    },

    //开始游戏
    _startGame:function()
    {
        var arrTurn = [];
        for(var i = 0;i<H_NUM*W_NUM;i++)
        {
            arrTurn.push(i);
        }
        arrTurn.sort(function(){return (Math.random()>0.5) ? -1 : 1;});
        //arrTurn = [0,1,2,3,4,5,6,8,8];  //如果拼图水平太菜，请解除词句屏蔽。仅限于3*3的格局
        cc.log(arrTurn);
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                var value = arrTurn[i*W_NUM + j];
                var p1 = [parseInt(value/W_NUM),parseInt(value%W_NUM)];
                var p2 = [i,j];
                this._redisplay(p1,p2);
            }
        }
        this.isStart = true;  //设置游戏开始标签
    },

    //重新显示
    _redisplay:function(arr1,arr2)
    {
        var tempPosition = this.arrCellSpr[arr1[0]][arr1[1]].getPosition();
        this.arrCellSpr[arr1[0]][arr1[1]].setPosition(this.arrCellSpr[arr2[0]][arr2[1]].getPosition());
        this.arrCellSpr[arr2[0]][arr2[1]].setPosition (tempPosition);
        var shred = this.arrCellSpr[arr1[0]][arr1[1]];
        this.arrCellSpr[arr1[0]][arr1[1]] = this.arrCellSpr[arr2[0]][arr2[1]];
        this.arrCellSpr[arr2[0]][arr2[1]] = shred;
        if(this.isStart)   //当游戏开始时才执行检查
        {
            this._checkAllFinish();
        }
    },

    //检查点击图片四周是否有空白
    _checkNeighbor:function(i,j)
    {
        if(i - 1 >= 0 && this.arrCellSpr[i-1][j].opacity == 0)  //当左边存在碎片且透明度为0时才执行移动
        {
                this._redisplay([i,j],[i-1,j]);
        }
        else if(i+1 < H_NUM && this.arrCellSpr[i+1][j].opacity == 0)
        {
                this._redisplay([i,j],[i+1,j]);
        }
        else if(j-1 >= 0 && this.arrCellSpr[i][j-1].opacity == 0)
        {
                this._redisplay([i,j],[i,j-1]);
        }
        else if(j+1 < W_NUM && this.arrCellSpr[i][j+1].opacity == 0)
        {
                this._redisplay([i,j],[i,j+1]);
        }
    },



    //获取在数组中的下标
    _getIndexInArr:function(cell)
    {
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                if(this.arrCellSpr[i][j] == cell) return [i,j];
            }
        }
    },

    //检查所有碎片是否归位
    _checkAllFinish:function()
    {
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                var p1 = this.arrCellSpr[i][j].getPosition();
                var p2 = this.arrCellSpr[i][j] ._tagetPositon;
                if(p1.x != p2.x ||  p1.y != p2.y)  //JS的对象不能直接比较，所以逐项元素比较
                {
                    this.winLab.setVisible(false);
                    return;
                }
            }
        }
        this.winLab.setVisible(true);   //显示胜利文本
    }
});


var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

CellSpr.js

var CellSpr = cc.Sprite.extend({
    //碎片目标位置
    _tagetPositon:null,
    ctor:function(url,rect,p)
    {
        this._super(url,rect);
        this._tagetPositon = p;   //保存碎片的目标位置
    },

    onEnter:function()
    {
        this._super();
        var that = this;
        var listener = cc.EventListener.create({
            event:cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches:true,
            onTouchBegan:function(touch,event)
            {
                if(that.getParent._isGameOver == true) return;
                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))
                {
                    cc.eventManager.dispatchCustomEvent(CLICK_CELL_EVENT, that);  //派发自定义事件
                    return true;
                }
                return false;
            },
            onTouchMove:function(touch,event){},
            onTouchEnded:function(touch,event)
            {
                var target  = event.getCurrentTarget();
            }
        })
        cc.eventManager.addListener(listener, this);
    },
})