Erstellen Sie Puzzlespiele mit jQuery_jquery-js-Tutorial-php.cn

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('
恭喜过关
');

        }

    });

Verwandte Etiketten：

jquery 拼图

Quelle：php.cn

Vorheriger Artikel：Beispielanalyse der innerHTML-Nutzung in Javascript_Javascript-Kenntnissen Nächster Artikel：Verwenden von JS zum Zeichnen von Punkten, Linien und Oberflächen. Javascript-Kenntnisse

Erklärung dieser Website

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

Neueste Artikel des Autors