Buat permainan teka-teki dengan jQuery_jquery-tutorial js-php.cn

Buat permainan teka-teki dengan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 16:20:53

asal

1402 orang telah melayarinya

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

        }

    });