/*
バージョン: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('
恭喜过关
');
}
});