JQuery - puzzle game

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Individual website online examples:

Analysis of the source code of:

[A picture] how to generate grid, I think of the two methods:

   (1)Put the big picture into 16 Zhang Xiaotu, and then use the IMG tag SRC

   (2)Only a big picture, and then cutting the localization of CSS background-position for each element of the background image, this requires the 16 arrays of [0,0], [-150,0], [-300,0]... (I use this).

[Two] the background picture orientation array and array layout positioning

  In the choice of the use of CSS positioning map, you need to generate data.

CSS background location array need to: [0,0],[-150,0],[-300,0],[-450,0],




They are used in the [0, -150, -300, -450] value (which is my definition image height, width of 150 times the number), so use this value through the for () {} automatically generated array

      //this.nCol here is 4 - for my puzzle is 4*4

// This.nArea is 150, is each picture of the wide, high (600px/4) - graphs is 600*600

var l = [], p = []; for(var n=0;n<this.nCol;n++){ l.push(n*(this.nArea+1)); //Layout positioning array [0151302453] mesh generation, Because I need the border effect (green border in the figure), So the array and CSS background positioning is not the same as the p.push (-n*this.nArea); // generates [0, -150, -300, -450] is said above, CSS background position value} for (VaR i=0; i<this.nLen; i++) {// this.nLen is 16

       var t = parseInt(i/this.nCol), k = i - this.nCol*t, aP = [], aL = []; aP.push(p[k],p[t],i); //Here I give CSS the background position array added I, is for the third step judgement are used, do not need to set the CSS property to bring, I set it to tag attributes.[bg-i] aL.push(l[k],l[t]); this.aBgp[i] = aP; this.aLayout[i] = aL; }

[Three] to determine whether the completion of

The second element (DIV) application background of CSS localization of   this.aBgp[1] (value [-150,0,1]), but the layout positioning random assignment if it is this.aLayout[3] (the 3 is randomly generated) (value [453,0]), then left:453px,top:0,

Move this element, change is its letf, top value, rather than the structure order, get the elements of left, top value (if it is to left:151px, top:0), and then compared with the value of this.aLayout[1] [151,0] (1 index, which is itself attribute is [bg-i]=1 and this.aBgp[1] index) judgment, equal to the element after moving position is correct.

Detailed code:

    function LGY_game(option){
        this.oWrap = $(option.wrap);
        this.data = option.data; //The picture data
        this.nLen = option.count; //How many pieces of the puzzle
        this.nArea = option.area; //Each size
        this.aLayout = [];
        this.nCol = Math.sqrt(this.nLen); 
        this.aBgp = [];
    LGY_game.prototype = {
            var arry = a.slice(0),
                newArry = [];

for(var n=0;n<r;n++){ var nR = parseInt(Math.random()*arry.length); newArry.push(arry[nR]); arry.splice(nR,1); } return newArry; }, setPos:function(){ var l = [], p = []; for(var n=0;n<this.nCol;n++){ l.push(n*(this.nArea+1)); p.push(-n*this.nArea); } for(var i=0;i<this.nLen;i++){ var t = parseInt(i/this.nCol), k = i - this.nCol*t, aP = [], aL = []; aP.push(p[k],p[t],i); aL.push(l[k],l[t]); this.aBgp[i] = aP; this.aLayout[i] = aL; } }, isPass:function(item){ var _that = this, is = 0; item.each(function(){ var l = parseInt($(this).css('left')), t = parseInt($(this).css('top')), i = parseInt($(this).attr('bg-i')); 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<this.nLen;n++){

var html = $('<div bg-i="'+this.aBgp[n][2]+'" class="item"></div>'). 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', 'width':this.nArea+'px', 'height':this.nArea+'px' }); this.oWrap.append(html); } }, passTips:function(){ this.oWrap.append('<div class="mask"></div><div class="mask-btn">Congratulations.</div>'); }, move:function(){ var $div = this.oWrap.find('.item'), _that = this; var hasElem = function(){ var t = false; $div.each(function(){ if($(this).hasClass("on")){ t = true; } }); return t; }; // click $div.click(function(){ if(hasElem()&&!$(this).hasClass("on")){ var index = $('.on').index();

            // To prevent the rapid click, error BUG 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){ _that.passTips(); } }); } else { if($(this).hasClass("on")){ $(this).removeClass("on"); $(this).find('span').remove(); } else { $(this).addClass("on").append("<span></span>"); } } }); }, int:function(){

       // Set the layout and background location array this.setPos();

       // Create a this.createDom puzzle();

       // Mobile function this.move ();}} // instantiation

  //Here is a picture library, and then take a larger random parameters passed to the instance of VaR data = ['images/01.jpg','images/02.jpg','images/03.jpg'] var nR = parseInt(Math.random()*data.length); new LGY_game({'data':data[nR],'wrap':'.wrap','count':16,'area':150});


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Webster at November 21, 2013 - 9:02 PM