jQuery_jqueryでパズルゲームを作る

ソースコードのアイデア分析:

【1】画像グリッドを生成するには2つの方法が考えられます:

(1) この大きな画像を 16 枚の小さな画像に切り分け、img タグの src を使用します

(2) 大きな画像が 1 つだけあり、各要素の背景画像が切り取られ、CSS の背景位置を使用して配置されます。これには 16 個の配列 [0,0]、[-150,0]、 [-300,0]......(これを採用)

【2】絵背景配置配列とレイアウト配置配列

CSS を使用して画像の配置と切り取りを選択した後、データを生成する必要があります。

必要な CSS 背景位置配列は次のとおりです: [0,0]、[-150,0]、[-300,0]、[-450,0]、

[0,-150],[-150,-150],[-300,-150],[-450,-150],

[0,-300]、[-150,-300]、[-300,-300]、[-450,-300]、

[0,-450]、[-150,-450]、[-300,-450]、[-450,-450]

その中で[0,-150,-300,-450]の値が使われる(つまり画像の高さと幅を150の倍数として定義する)ので、この値を使用しますfor(){} Array

を通じて自動的に生成します

コードをコピーします コードは次のとおりです:

//this.nCol は 4 --- 私のパズルは 4*4 なので
// this.nArea は 150、つまり各画像の幅と高さ (600px/4) - 大きな画像は 600*600
var l = [],
p = [];
for(var n=0;n l.push(n*(this.nArea 1)); // [0,151,302,453] グリッド レイアウトの位置配列を生成します。この効果には境界線 (図の緑色の境界線) が必要なので、CSS の背景の位置配列とは異なります。 🎜> p.push(-n*this.nArea); }
for(var i=0;i var t = parseInt(i/this.nCol),
k = i - this.nCol*t,
aP = [],
aL = [];
aP.push(p[k],p[t],i); //ここでは、ステップ 3 の判断に使用される CSS 背景位置配列に i を追加しました。設定するために使用する必要はありません。 css属性を[bg-i]
タグの属性として設定します。 aL.push(l[k],l[t]);
This.aBgp[i] = aP;
This.aLayout[i] = aL; }

[3] 完了したかどうかを判断します

2 番目の要素 (div) は、css の背景の配置 this.aBgp[1] (値は [-150,0,1]) を適用し、ランダムに割り当てられたレイアウトの配置は this.aLayout[3] です (ここで 3 はランダムです)生成されます) (値は [453,0])、次に left:453px,top:0;

この要素を移動すると、変わるのは letf と top の値であり、この要素自体の構造の順序ではありません (left:151px、top:0 に移動した場合)。 、そして this.aLayout[1] の値 [151,0] から判断して (1 のインデックスは自身のラベル属性の [bg-i]=1 と this.aBgp[1] のインデックスです)、等しいことは、要素が移動したことを意味します。後方の位置は正しいです。

詳細コード:

コードをコピー コードは次のとおりです:

/*
バージョン: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('

恭喜过关

');
        }
    });