复制代码 代码如下:

　　　　　　//this.nCol在这里是4 --- 因为我的拼图是4*4
         // this.nArea是150，是每张图片的宽，高（600px/4）--大图是600*600
            var l = [],
                p = [];
            for(var n=0;n<this.nCol;n++){
                l.push(n*(this.nArea+1));     //生成[0,151,302,453] 网格的布局定位数组，因为我的效果需要边框（图中的绿色边框），所以与css背景定位数组就不一样了
                p.push(-n*this.nArea);         // 生成了[0,-150,-300,-450]就是上面说的，CSS背景定位值
            }
            for(var i=0;i<this.nLen;i++){   // this.nLen 是为 16  
　　　　　　          var t = parseInt(i/this.nCol),
                        k = i - this.nCol*t,
                        aP = [],
                        aL = [];
                    aP.push(p[k],p[t],i); //这里我给css背景定位数组额外加了i，是为第3步判断用的，不需要拿来设置css属性的，我把它设置为标签的属性里[bg-i]
                    aL.push(l[k],l[t]);
                    this.aBgp[i] = aP;
                    this.aLayout[i] = aL;               
            }

复制代码 代码如下:

/*
    version:2.0
    */
    function GyPuzzleGame(option){
        this.target = $(option.target);
        this.data = option.data; //图片数据
        this.opt = option;
        this.nLen = option.count; //多少张拼图
        this.aColLayout = option.aColLayout || [0,151,302,453];//布局横向数组
        this.aRowLayout = option.aRowLayout || [0,151];//布局竖向数组
        this.aColBgp = option.aColBgp || [0,-150,-300,-450];//布局横向数组
        this.aRowBgp = option.aRowBgp || [0,-150];//布局竖向数组
        this.nCol = this.aColLayout.length;
        this.nRow = this.aRowLayout.length;
        this.aLayout = []; //布局数组
        this.aBgp = []; //css背景定位数组
        this.init();
    }
    GyPuzzleGame.prototype = {
        getRand:function(a,r){
            var arry = a.slice(0),
                newArry = [];
            for(var n=0;n<r;n++){
                var nR = parseInt(Math.random()*arry.length);
                newArry.push(arry[nR]);
                arry.splice(nR,1);
            }
            return newArry;
        },
        setPos:function(){
            for(var i=0;i<this.nLen;i++){               
                var t = parseInt(i/this.nCol),
                    l = i - this.nCol*t,
                    aP = [],
                    aL = [];
                aP.push(this.aColBgp[l],this.aRowBgp[t],i);
                aL.push(this.aColLayout[l],this.aRowLayout[t]);
                this.aBgp[i] = aP;
                this.aLayout[i] = aL;               
            }
        },
        isPass:function(item){
            var _that = this,
                is = 0;
            item.each(function(){
                var l = parseInt($(this).css(\'left\')),
                    t = parseInt($(this).css(\'top\')),
                    i = parseInt($(this).attr(\'data-bgi\'));
                if(l==_that.aLayout[i][0]&&t==_that.aLayout[i][1]){
                    is ++;   
                }               
            });
            return is;
        },
        createDom:function(){
            var layout = this.getRand(this.aLayout,this.nLen);
            // console.log(layout);
            for(var n=0;n<this.nLen;n++){
                var t = parseInt(n/this.nCol),
                    l = n - this.nCol*t;
                var html = $(\'<div data-bgi=\"\'+this.aBgp[n][2]+\'\" class=\"puzzle_list\"></div>\').
                css({\'left\':layout[n][0]+\'px\',
                    \'top\':layout[n][1]+\'px\',
                    \'background-image\':\'url(\'+this.data+\')\',
                    \'background-position\':this.aBgp[n][0]+\'px\'+\' \'+this.aBgp[n][1]+\'px\'
                });
                this.target.append(html);
            }
        },
        move:function(){
            var $div = this.target.find(\'.puzzle_list\'),
                _that = this;
            var    hasElem = function(){
                    var t = false;
                    $div.each(function(){
                        if($(this).hasClass(\"on\")){
                            t = true;
                        }
                    });
                    return t;
                };
            // click
            $div.click(function(){
                var $this = $(this);   
                if(hasElem()&&!$this.hasClass(\"on\")){
                    var index = $(\'.on\').index();
                    if($div.eq(index).is(\':animated\')||$this.is(\':animated\')){
                        return false;
                    }
                    var l = $div.eq(index).position().left,
                        t = $div.eq(index).position().top,
                        myl = $this.position().left,
                        myt = $this.position().top;
                    $(this).animate({\'left\':l,\'top\':t});
                    $div.eq(index).css({\'z-index\':\'1\'}).animate({\'left\':myl,\'top\':myt},function(){
                            $(this).removeClass(\"on\");
                            $(this).find(\'span\').remove();
                            $(this).css({\'z-index\':\'0\'});
                            if(_that.isPass($div) == _that.nLen){
                                if(typeof _that.opt.success == \'function\'){
                                    _that.opt.success({target:_that.target});
                                }
                            }
                    });
                }
                else {
                    if($this.hasClass(\"on\")){
                        $this.removeClass(\"on\");
                        $this.find(\'span\').remove();
                    }
                    else {
                        $this.addClass(\"on\").append(\"<span></span>\");
                    }
                }
            });
        },
        init:function(){
            // 设置CSS背景定位与元素布局数组
            this.setPos();
            // 创建元素
            this.createDom();
            // 挪动图片
            this.move();
        }
    }
//实例调用
    new GyPuzzleGame({
        \'data\':\'images/03.jpg\',
        \'target\':\'#pA\',
        \'count\':8,
        \'success\':function(opt){
            opt.target.append(\'<div class=\"puzzle_mask\"></div><div class=\"puzzle_pass\">恭喜过关</div>\');
        }
    });