jQuery_jqueryでパズルゲームを作る

/*
バージョン:2.0
*/
関数GyPuzzleGame(オプション){
This.target = $(option.target);
This.data = option.data; //画像データ
This.opt = オプション;
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 var nR = parseInt(Math.random()*arry.length);
newArry.push(arry[nR]);
arry.splice(nR,1);
}
return newArry;
}、
setPos:function(){
for(var i=0;i 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,
= 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 var t = parseInt(n/this.nCol),
l = n - this.nCol*t;
var html = $('

').
                css({'left':layout[n][0] 'px',
                    'top':layout[n][1] 'px',
                    '背景画像':'url(' this.data ')',
                    '背景位置':this.aBgp[n][0] 'px' ' ' this.aBgp[n][1] 'px'
                });
                this.target.append(html);
            }
        }、
        move:function(){
            var $div = this.target.find('.puzzle_list'),
                _あれ = これ;
            var hasElem = function(){
                    var t = false;
                    $div.each(function(){
                        if($(this).hasClass("on")){
                            t = true;
                        }
                    });
                    return t;
                };
            //
をクリック             $div.click(function(){
                var $this = $(this);   
                if(hasElem()&&!$this.hasClass("on")){
                    var インデックス = $('.on').index();
                    if($div.eq(index).is(':animated')||$this.is(':animated')){
                        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 == '関数'){
                                    _that.opt.success({target:_that.target});
                                }
                            }
                    });
                }
                他 {
                    if($this.hasClass("on")){
                        $this.removeClass("on");
                        $this.find('span').remove();
                    }
                    他 {
                        $this.addClass("on").append("");
                    }
                }
            });
        }、
        init:function(){
            // 配置CSS背景定位と元素布局数群
            this.setPos();
            // 创建元素
            this.createDom();
            // 挪アニメーション写真
            this.move();
        }
    }
//实例调用
    新しい GyPuzzleGame({
        'data':'images/03.jpg',
        'ターゲット':'#pA',
        'カウント':8、
        '成功':関数(オプション){
            opt.target.append('

恭喜过关

');
        }
    });