Créez des jeux de réflexion avec jQuery_jquery

Analyse des idées de code source :

【1】Comment générer une grille d'images, je pense à deux méthodes :

(1) Découpez cette grande image en 16 petites images, puis utilisez le src de la balise img

(2) Il n'y a qu'une seule grande image, puis l'image d'arrière-plan de chaque élément est coupée et positionnée en utilisant la position d'arrière-plan de CSS, ce qui nécessite 16 tableaux [0,0], [-150,0], [-300 ,0]..........(J'adopte ça)

【2】Matrice de positionnement d'arrière-plan de l'image et matrice de positionnement de mise en page

Après avoir choisi d'utiliser CSS pour positionner et couper l'image, vous devez générer des données.

Le tableau de positionnement d'arrière-plan CSS requis est : [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]

Les valeurs​​dans [0,-150,-300,-450] sont utilisées parmi elles (c'est-à-dire que je définis la hauteur et la largeur de l'image comme des multiples de 150), j'utilise donc cette valeur pour le générer automatiquement via for(){} Array

Copier le code Le code est le suivant :

//this.nCol ici c'est 4 --- parce que mon puzzle est 4*4
// this.nArea vaut 150, qui correspond à la largeur et à la hauteur de chaque image (600px/4) - la grande image fait 600*600
          var l = [],
                  p = [];
pour(var n=0;n l.push(n*(this.nArea 1)); //Générer un tableau de positionnement de disposition en grille [0,151,302,453], car mon effet nécessite une bordure (bordure verte dans l'image), il est donc différent du tableau de positionnement d'arrière-plan 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); //Ici, j'ai ajouté un i supplémentaire au tableau de positionnement d'arrière-plan CSS, qui est utilisé pour le jugement à l'étape 3. Il n'est pas nécessaire de l'utiliser pour définir Attributs CSS. Je le définis comme attribut de la balise [bg-i]
. aL.push(l[k],l[t]);
This.aBgp[i] = aP;
This.aLayout[i] = aL
            }

[3] Déterminer s'il est terminé

Le deuxième élément (div) applique le positionnement d'arrière-plan CSS this.aBgp[1] (la valeur est [-150,0,1]), et le positionnement de mise en page attribué au hasard est this.aLayout[3] (ici 3 est aléatoire généré) (la valeur est [453,0]), puis left:453px,top:0

En déplaçant cet élément, ce qui change, ce sont ses valeurs letf et top, et non l'ordre de sa propre structure. Obtenez les valeurs gauche et top de cet élément (s'il est déplacé vers left:151px, top:0). , puis utilisez à en juger par la valeur [151,0] de this.aLayout[1] (l'index 1 est le [bg-i]=1 du propre attribut d'étiquette et l'index de this.aBgp[1]), l'égalité signifie que l'élément a bougé. La position arrière est correcte.

Code détaillé :

Copier le code Le code est le suivant :

/*
Version :2.0
*/
Fonction GyPuzzleGame(option){
This.target = $(option.target);
This.data = option.data; //Données d'image
This.opt = option;
This.nLen = option.count; //Combien de pièces de puzzle
This.aColLayout = option.aColLayout || [0,151,302,453];//Mise en page du tableau horizontal
This.aRowLayout = option.aRowLayout || [0,151];//Mise en page du tableau vertical
This.aColBgp = option.aColBgp || [0,-150,-300,-450];//Mise en page du tableau horizontal
This.aRowBgp = option.aRowBgp || [0,-150];//Mise en page du tableau vertical
This.nCol = this.aColLayout.length
This.nRow = this.aRowLayout.length;
This.aLayout = []; //Tableau de mise en page
This.aBgp = []; //tableau de positionnement en arrière-plan CSS
This.init();
>
GyPuzzleGame.prototype = {
        getRand:fonction(a,r){
            var arry = a.slice(0),
nouveauArry = [];
pour(var n=0;n               var nR = parseInt(Math.random()*arry.length);
newArry.push(arry[nR]);
                 arry.splice(nR,1);
            }
               return newArry ;
},
setPos:fonction(){
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:fonction(élément){
               var _that = this,
est = 0;
Item.each(function(){
              var l = parseInt($(this).css('left')),
                      t = parseInt($(this).css('top')),
                         i = parseInt($(this).attr('data-bgi'));
Si(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);
            >
        },
        déplacer:fonction(){
            var $div = this.target.find('.puzzle_list'),
                _ça = ceci ;
            var    hasElem = fonction(){
                    var t = faux;
                    $div.each(function(){
                        if($(this).hasClass("on")){
                            t = vrai ;
                        >
                    });
                    retourne t;
                };
            // cliquez
            $div.click(function(){
                var $this = $(this);   
                if(hasElem()&&!$this.hasClass("on")){
                    var index = $('.on').index();
                    if($div.eq(index).is(':animated')||$this.is(':animated')){
                        retourner faux ;
                    >
                    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});
                                >
                            >
                    });
                >
                sinon {
                    si($this.hasClass("on")){
                        $this.removeClass("on");
                        $this.find('span').remove();
                    >
                    sinon {
                        $this.addClass("on").append("");
                    >
                >
            });
        },
        init:fonction(){
            // 设置CSS背景定位与元素布局数组
            this.setPos();
            // 创建元素
            this.createDom();
            // 挪动图片
            this.move();
        >
    >
//实例调用
    nouveau GyPuzzleGame ({
        'données':'images/03.jpg',
        'cible' : '#pA',
        'compte' :8,
        'succès':function(opt){
            opt.target.append('

恭喜过关

');
        >
    });