Erstellen Sie Puzzlespiele mit jQuery_jquery

Quellcode-Ideenanalyse:

【1】Um ein Bildraster zu erstellen, fallen mir zwei Methoden ein:

(1) Schneiden Sie dieses große Bild in 16 kleine Bilder und verwenden Sie dann den src des img-Tags

(2) Es gibt nur ein großes Bild, und dann wird das Hintergrundbild jedes Elements mithilfe der Hintergrundposition von CSS ausgeschnitten und positioniert, was 16 Arrays [0,0], [-150,0] erfordert. [-300 ,0]..........(Ich übernehme das)

【2】Bildhintergrund-Positionierungsarray und Layout-Positionierungsarray

Nachdem Sie sich für die Verwendung von CSS zum Positionieren und Ausschneiden des Bildes entschieden haben, müssen Sie Daten generieren.

Das erforderliche CSS-Hintergrundpositionierungsarray ist: [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]

Dabei werden die Werte in [0,-150,-300,-450] verwendet (das heißt, ich definiere die Höhe und Breite des Bildes als Vielfaches von 150), also verwende ich diesen Wert um es automatisch über for(){} Array

zu generieren

Code kopieren Der Code lautet wie folgt:

//this.nCol hier ist 4 --- weil mein Puzzle 4*4 ist
// this.nArea ist 150, was der Breite und Höhe jedes Bildes entspricht (600px/4) – das große Bild ist 600*600
          var l = [],
                  p = [];
for(var n=0;n l.push(n*(this.nArea 1)); //Generiere [0,151,302,453] Rasterlayout-Positionierungsarray, da mein Effekt einen Rahmen erfordert (grüner Rand im Bild), daher unterscheidet er sich vom CSS-Hintergrundpositionierungsarray
                  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); // Hier habe ich dem CSS-Hintergrundpositionierungsarray ein zusätzliches i hinzugefügt, das zur Beurteilung in Schritt 3 verwendet wird. Es muss nicht zum Festlegen verwendet werden CSS-Attribute. Ich setze es als Attribut des Tags [bg-i]
aL.push(l[k],l[t]);
This.aBgp[i] = aP;
This.aLayout[i] = aL;             }

[3] Bestimmen Sie, ob es abgeschlossen ist

Das zweite Element (div) wendet die CSS-Hintergrundpositionierung this.aBgp[1] an (Wert ist [-150,0,1]), und die zufällig zugewiesene Layoutpositionierung ist this.aLayout[3] (hier ist 3 zufällig). generiert) (der Wert ist [453,0]), dann left:453px,top:0;

Durch das Verschieben dieses Elements ändern sich seine letf- und top-Werte, nicht die Reihenfolge seiner eigenen Struktur. Erhalten Sie die linken und top-Werte dieses Elements (wenn es nach left:151px, top:0 verschoben wird). , und dann verwenden Beurteilen Sie anhand des Werts [151,0] von this.aLayout[1] (der 1-Index ist der [bg-i] = 1 des eigenen Label-Attributs und der Index von this.aBgp[1]), Gleichheit bedeutet, dass sich das Element bewegt hat. Die hintere Position ist korrekt.

Detaillierter Code:

Code kopieren Der Code lautet wie folgt:

/*
Version:2.0
*/
Funktion GyPuzzleGame(option){
This.target = $(option.target);
This.data = option.data; //Bilddaten
This.opt = option;
This.nLen = option.count; //Wie viele Puzzleteile
This.aColLayout = option.aColLayout || [0,151,302,453];//Layout horizontales Array
This.aRowLayout = option.aRowLayout || [0,151];//Layout vertikales Array
This.aColBgp = option.aColBgp ||. [0,-150,-300,-450];//Layout horizontales Array
This.aRowBgp = option.aRowBgp ||. [0,-150];//Layout vertikales Array
This.nCol = this.aColLayout.length;
This.nRow = this.aRowLayout.length;
This.aLayout = []; //Layout-Array
This.aBgp = []; //CSS-Hintergrundpositionierungsarray
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,
ist = 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',
                    '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'),
                _das = das;
            var    hasElem = function(){
                    var t = false;
                    $div.each(function(){
                        if($(this).hasClass("on")){
                            t = wahr;
                        }
                    });
                    return t;
                };
            // klicken
            $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});
                                }
                            }
                    });
                }
                sonst {
                    if($this.hasClass("on")){
                        $this.removeClass("on");
                        $this.find('span').remove();
                    }
                    sonst {
                        $this.addClass("on").append("");
                    }
                }
            });
        },
        init:function(){
            // 设置CSS背景定位与元素布局数组
            this.setPos();
            // 创建元素
            this.createDom();
            // 挪动图片
            this.move();
        }
    }
//实例调用
    neues GyPuzzleGame({
        'data':'images/03.jpg',
        'target':'#pA',
        'count':8,
        'success':function(opt){
            opt.target.append('

恭喜过关

');
        }
    });

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielanalyse der innerHTML-Nutzung in Javascript_Javascript-KenntnissenNächster Artikel：Beispielanalyse der innerHTML-Nutzung in Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse