Buat permainan teka-teki dengan jQuery_jquery

Analisis idea kod sumber:

【1】Bagaimana untuk menjana grid gambar, saya memikirkan dua kaedah:

(1) Potong gambar besar ini kepada 16 gambar kecil, dan kemudian gunakan src tag img

(2) Hanya terdapat satu imej besar, dan kemudian imej latar belakang setiap elemen dipotong dan diletakkan menggunakan kedudukan latar belakang CSS, yang memerlukan 16 tatasusunan [0,0], [-150,0], [-300 ,0]..........(Saya pakai ini)

【2】Susun atur kedudukan latar belakang gambar dan tatasusunan kedudukan reka letak

Selepas memilih untuk menggunakan CSS untuk meletakkan dan memotong imej, anda perlu menjana data.

Tatasusunan penentududukan latar belakang css yang diperlukan ialah: [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]

Nilai-nilai dalam [0,-150,-300,-450] digunakan di antaranya (iaitu, saya mentakrifkan tinggi dan lebar imej sebagai gandaan 150), jadi saya menggunakan nilai ini untuk menjananya secara automatik melalui for(){} Array

Salin kod Kod adalah seperti berikut:

//this.nCol di sini ialah 4 --- kerana teka-teki saya ialah 4*4
// this.nArea ialah 150, iaitu lebar dan ketinggian setiap gambar (600px/4) - gambar besar ialah 600*600
          var l = [],
                  p = [];
untuk(var n=0;n l.push(n*(this.nArea 1)); //Jana [0,151,302,453] tatasusunan kedudukan susun atur grid, kerana kesan saya memerlukan sempadan (sempadan hijau dalam gambar), jadi ia berbeza daripada tatasusunan kedudukan latar belakang css
                   p.push(-n*ni.nKawasan);             }
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); //Di sini saya menambah i tambahan pada tatasusunan kedudukan latar belakang css, yang digunakan untuk penghakiman dalam langkah 3. Ia tidak perlu digunakan untuk menetapkan atribut css. Saya Tetapkan ia sebagai atribut teg [bg-i]
aL.push(l[k],l[t]);
Ini.aBgp[i] = aP;
This.aLayout[i] = aL;             }

[3] Tentukan sama ada ia telah selesai

Elemen kedua (div) menggunakan kedudukan latar belakang css this.aBgp[1] (nilai ialah [-150,0,1]), dan kedudukan susun atur yang ditetapkan secara rawak ialah this.aLayout[3] (di sini 3 adalah secara rawak dijana) (nilainya ialah [453,0]), kemudian kiri:453px, atas:

Dengan mengalihkan elemen ini, yang berubah ialah nilai letf dan atasnya, bukan susunan strukturnya sendiri Dapatkan nilai kiri dan atas elemen ini (jika ia dialihkan ke kiri:151px, atas:0) , dan kemudian gunakan Penghakiman daripada nilai [151,0] ini.aLayout[1] (indeks 1 ialah [bg-i]=1 atribut label sendiri dan indeks ini.aBgp[1]), kesamaan bermakna elemen telah bergerak Kedudukan belakang adalah betul.

Kod terperinci:

Salin kod Kod adalah seperti berikut:

/*
Versi:2.0
*/
Fungsi GyPuzzleGame(pilihan){
This.target = $(option.target);
This.data = option.data; //Data imej
This.opt = pilihan;
This.nLen = option.count; //Berapa keping teka-teki
This.aColLayout = option.aColLayout || [0,151,302,453];//Layout tatasusunan mendatar
This.aRowLayout = option.aRowLayout || [0,151];//Layout menegak tatasusunan
This.aColBgp = option.aColBgp || [0,-150,-300,-450];//Layout mendatar tatasusunan
This.aRowBgp = option.aRowBgp || [0,-150];//Layout menegak tatasusunan
This.nCol = this.aColLayout.length; This.nRow = this.aRowLayout.length;
This.aLayout = []; //Layout array
This.aBgp = []; //tatasusunan kedudukan latar belakang css
This.init();
}
GyPuzzleGame.prototype = {
         getRand:function(a,r){
            var arry = a.slice(0),
newArry = [];
untuk(var n=0;n               var nR = parseInt(Math.random()*arry.length);
newArry.push(arry[nR]);
                  arry.splice(nR,1);
            }
               kembalikan Arry baharu;
},
setPos:function(){
untuk(var i=0;i l = i - ini.nCol*t,
                  aP = [],
aL = [];
aP.push(this.aColBgp[l],this.aRowBgp[t],i);
aL.push(this.aColLayout[l],this.aRowLayout[t]);
Ini.aBgp[i] = aP;
This.aLayout[i] = aL;             }
},
​​isPass:function(item){
               var _itu = ini,
                                                              ialah = 0; Item.each(function(){
              var l = parseInt($(this).css('left')),
                      t = parseInt($(this).css('atas')),
                         i = parseInt($(this).attr('data-bgi'));
Jika(l==_itu.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',
                    'atas': susun atur[n][1] 'px',
                    'imej latar belakang':'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'),
                _itu = ini;
            var    hasElem = function(){
                    var t = palsu;
                    $div.each(function(){
                        if($(this).hasClass("on")){
                            t = benar;
                        }
                    });
                    pulangkan t;
                };
            // klik
            $div.click(function(){
                var $ini = $(ini);   
                if(hasElem()&&!$this.hasClass("on")){
                    indeks var = $('.on').index();
                    if($div.eq(index).is(':animated')||$this.is(':animated')){
                        pulangkan palsu;
                    }
                    var l = $div.eq(indeks).kedudukan().kiri,
                        t = $div.eq(indeks).kedudukan().atas,
                        myl = $this.position().left,
                        myt = $this.position().top;
                    $(this).animate({'kiri':l,'atas':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});
                                }
                            }
                    });
                }
                lain {
                    if($this.hasClass("on")){
                        $this.removeClass("on");
                        $this.find('span').remove();
                    }
                    lain {
                        $this.addClass("on").append("");
                    }
                }
            });
        },
        init:function(){
            // 设置CSS背景定位与元素布局数组
            this.setPos();
            // 创建元素
            this.createDom();
            // 挪动图片
            this.move();
        }
    }
//实例调用
    GyPuzzleGame baharu({
        'data':'images/03.jpg',
        'sasaran':'#pA',
        'kira':8,
        'kejayaan':function(opt){
            opt.target.append('

恭喜过关

');
        }
    });

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn