cocos2d_js 拼图游戏源码（点击互换版）

resource.js

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

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

main.js

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(800, 800, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

app.js

var H_NUM = 3;  //拼图纵向碎片数量
var W_NUM = 4;  //拼图横向碎片数量

var HelloWorldLayer = cc.Layer.extend({
    //大图精灵
    baseSpr:null,
    //大图路径
    basePic_url:null,
    //碎片高
    hei:null,
    //碎片宽
    wid:null,
    //碎片数组
    arrCell:null,
    //被点击的碎片数组
    arrClickedCell:null,

    //构造函数
    ctor:function () {
        this._super();
        this._init();
        return true;
    },


    //初始化
    _init:function()
    {
        this.arrCell = [];
        this.arrClickedCell = [];
        this.basePic_url = res.pt1_url;
        this.baseSpr = new cc.Sprite(this.basePic_url);
        this.wid = this.baseSpr.width/W_NUM.toFixed(5) - 0.00001; //减0.00001是为了去掉偏差
        this.hei = this.baseSpr.height/H_NUM.toFixed(5) - 0.00001;
        this._spawnCell();
        cc.log(this.wid+" "+this.hei);
        //定时器，1秒后显示打乱后的碎片
        this.scheduleOnce(this._startGame, 3);
    },


    //生成碎片
    _spawnCell:function()
    {
        //获取屏幕尺寸
        var _winSize = cc.director.getWinSize();
        var cell;
        for(var i = 0;i<H_NUM;i++)
        {
            this.arrCell[i] = [];
            for(var j = 0;j<W_NUM;j++)
            {
                cell = new CellSpr(this.basePic_url,cc.rect(j*this.wid, i*this.hei, this.wid, this.hei),this);
                cell._setDate((_winSize.width - this.baseSpr.width + this.wid)/2 +  j * this.wid,
                            (_winSize.height + this.baseSpr.height - this.hei)/2 - i*this.hei, j,i);
                this.addChild(cell);
                this.arrCell[i][j] = cell;
            }
        }
    },

    //开始游戏
    _startGame:function()
    {
        var arrTurn = [];
        for(var i = 0;i<W_NUM * H_NUM;i++)
        {
            arrTurn.push(i);
        }
        //随机排序方案
        var policy = function()
        {
            var randNum = Math.random();
            return (randNum>0.5) ? 1: -1;
        }
        arrTurn.sort(policy);
        for(var i = 0;i<H_NUM;i++)
        {
            for(var j=0;j<W_NUM;j++)
            {
               this. _redisplayCell(arrTurn[i * W_NUM + j],i,j);
            }
        }
    },

   //重新显示碎片
    _redisplayCell:function(value,i,j)
    {
        cc.log("++++++"+value);
        this.arrCell[i][j].mValue = value;
        var v = cc.p(parseInt(value % W_NUM), parseInt(value / W_NUM));
        this.arrCell[i][j].initWithFile(this.basePic_url,cc.rect(v.x*this.wid, v.y*this.hei, this.wid, this.hei));
    },

    //点击碎片后的回调方法
    _callTouchHandler:function(obj)
    {
        //双击图片时取消选中功能
        if(this.arrClickedCell.length == 1 && this.arrClickedCell[0].value == obj.value)
        {
            this.arrCell[obj.i][obj.j]._resetAphle();
            this.arrClickedCell = [];
            return;
        }
        this.arrClickedCell.push(obj);
        if(this.arrClickedCell.length == 2)
        {
            this.arrCell[this.arrClickedCell[1].i][this.arrClickedCell[1].j]._resetAphle();
            this.arrCell[this.arrClickedCell[0].i][this.arrClickedCell[0].j]._resetAphle();
            this._redisplayCell(this.arrClickedCell[0].value, this.arrClickedCell[1].i, this.arrClickedCell[1].j);
            this._redisplayCell(this.arrClickedCell[1].value, this.arrClickedCell[0].i, this.arrClickedCell[0].j);
            this.arrClickedCell = [];
            this._checkResult();
        }
    },

    //检查拼图是否完成
    _checkResult: function () {
        for (var i = 0; i < H_NUM; i++) {
            for (var j = 0; j < W_NUM; j++)
                if (this.arrCell[i][j].mValue != i * W_NUM + j)return;
        }
        this.unschedule(this._startGame);
        cc.log("game complete");
    },
});



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

CellSpr.js

var CellSpr = cc.Sprite.extend({
    //碎片正确位置标签
    mValue:null,
    //碎片当前位置对应的行数
    ix:null,
    //碎片当前位置对应的列数
    iy:null,
    ctor:function(url,rect,par)
    {
        this._super(url,rect);
    },

    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))
                {
                    return true;
                }
                return false;
            },

            onTouchMove:function(touch,event){},
            onTouchEnded:function(touch,event)
            {
                var target  = event.getCurrentTarget();
                that._changeAphle();
            }

        })
        cc.eventManager.addListener(listener, this);
    },


    //改变点击图片的透明度
    _changeAphle:function()
    {
        this.setOpacity(150);
        //调用父类中碎片点击后的回调函数
        this.parent._callTouchHandler({
            value:this.mValue,
            i:this.iy,
            j:this.ix});
    },

    //恢复高亮
    _resetAphle:function()
    {
        this.setOpacity(255);
    },

    //保存数据
    _setDate:function(x,y,ix,iy)
    {
        this.x = x;
        this.y = y;
        this.ix = ix;
        this.iy = iy;
    }
})