The simple realization of the _jquery of jquery on the white block game

The front-end learning to end up, nor have the opportunity to write something decent, and then accidentally think of someone I played a little bit of the game, do not step on the white block, the hand remains ridiculed, and now think of the game to realize it is not difficult, so last week with jquery wrote a don't step on the white piece of the game, Just like when I was learning Python, I wrote a 2048. And today it's just a time to write a blog record is a period of time to learn the summary, did not play can go to the next original to play, the game is very simple, that is, from the Falling box click on the black quickly, if you click to Hundred or a black block has not been clicked, the game even end. The game is not difficult to achieve, are some small knowledge points. At that time, the head a little bit paste, there is a bug to see a long time did not solve, then the next morning when the head sober to see it, by the way here to remind oneself must not in the head is not sober when writing code. All right, so much for the first look at the effect chart, here don't spit my CSS style design is good ...

First, the game HTML page

The HTML interface of the game is very simple, divided into 4 parts,

Score title bar,

Game interface Theme container, at the beginning of a Div, and then with jquery dynamic generation of black and white lattice

Start the Pause button column

The modal frame displayed at the end of the game

Here is the Code section

<!  
  DOCTYPE html>  

Second, CSS layout

Finished writing HTML and then is CSS, where the main use of absolute layout, and then need to pay attention to is the game process due to the need to constantly generate a new div, so div container to set Overflow:hidden, this need to pay attention to, Then the other knowledge point is absolute,relative how to layout, modal frame how to achieve and center, it is easy to see the code below.

*{margin:0; 
padding:0; 
  }. main{width:808px; 
  margin:50px Auto; 
  Background:gray; 
  min-height:544px; 
position:relative; 
  }. content{width:408px; 
  margin:0 Auto; 
  height:408px; 
  BORDER:2PX solid Green; 
  Background-color:white; 
  position:relative; 
  top:0; 
Overflow:hidden; 
  } #inner {position:relative; 
top:-102px; 
}. item{height:102px; 
  }. Item *{float:left; 
  height:100px; 
  width:100px; 
  Background-color:white; 
BORDER:1PX solid black; 
}. black{Background-color:black; 
  } h3{Text-align:center; 
  padding-top:20px; 
padding-bottom:20px; 
} h3 span{Color:brown; 
}. hide{Display:none; 
  }. shadow{Position:absolute; 
  left:0; 
  bottom:0; 
  right:0; 
  top:0; 
  Background-color:gray; 
opacity:0.6; 
  }. alert-box{Position:absolute; 
  width:300px; 
  height:300px; 
  left:50%; 
  top:50%; 
  Margin-left: -150px; 
  Margin-top: -150px; Background-coLor:white; 
  }. Alert-box. game-over{margin-left:20px; 
margin-top:30px; 
  }. Alert-box. btn{width:150px; 
  position:relative; 
  Margin-left:auto; 
  Margin-right:auto; 
margin-top:20px; 
  }. Main. btn. container{width:150px; 
margin:20px Auto; 
  } button{Cursor:pointer; 
  border:0; 
  Display:inline-block; 
  width:70px; 
  height:30px; 
  line-height:30px; 
  Text-align:center; 
Background-color:cyan; }

Three, jquery implementation

The core part of the game is jquery, and the main functions are as follows

• Initialization of the game
• How to dynamically insert a row of div and delete a row of Div
• Start the pause button event binding
• Click on hundred blocks and black fast event delegates during the game
• How the game moves and how to score
• How to automatically increase the falling speed of white block
• How to determine the end of the game

Here's a look at the implementation of the initialization code, initialize a function before initialization, automatically insert a row, and in this line of 4 div a random black block for the game to click, the remaining 3 white pieces, how to randomly generate, how to create the dynamic div here need a little skill, specifically look below. A function that generates a row of Div can only be called 4 times in the initialization function when it completes

function Insertdiv () { 
  var rand = Math.floor (Math.random () * 4); Generates a random number from 0 to 3 that is used to determine where the black block is generated 
  $ ("#inner"). Prepend ("<div class= ' item ' ></div>");  
  $.each ([0, 1, 2, 3], function (k, v) { 
    if (v = = rand) { 
      $ ("#inner. Item"). Append ("<div class= ' black col ' ></div> '); 
    } else { 
      $ ("#inner. Item"). Append ("<div class= ' col ' ></div>") 
} 
 
 
function init () {////initial generation of 4*4 div 
  $.each ([0, 1, 2, 3], function () { 
    insertdiv (); 
  }); 
} 

When the initialization is complete, what we need to do is to get the interface moving, here wrote a function, each call the function, the game will automatically move down a few px, and then pass the function to the timer, you can continue to slide down, but here you need to note that the whereabouts of the process, if the whereabouts of more than one line, You need to reinsert a row and then delete the row that is out of range, and you need to restore the offset to its original position, and if you need to speed up the fall of the white block, just move it down each time, and the automatic acceleration behind the game is based on that. Let's take a look at this part of the code

function Move () { 
  var ctop = parseint ($ (' #inner '). Offset (). top); 
  Ctop + = Window.globalspeed; The custom global variable, the distance of each drop offset 
  $ ("#inner"). Offset ({top:ctop}); 
  if (ctop >= 114) { 
    insertdiv (); 
    $ ("#inner"). Offset ({top:12}); Move an item deldiv () up one item after just moving it 
    ; 
  } 

After that is the beginning of writing, pause, here is mainly the use of timers, here need to note that every time you click, you have to determine whether the timer has been cleared, otherwise there will be a bug, the following to directly look at the code

function Bindstart () { 
  $ ("#begin"). MouseOver (function () { 
    $ (this). CSS ("cursor", ' pointer '); 
  }). Click (function () { 
    if (window.globaliscleart1) {//custom global variable to see if the timer is clear 
 
    }else { 
      clearinterval (Window.globa 　　LT1); No clear, first clear, avoid two press Start button 
    window.globalt1 = setinterval (move,); 
    Window.globalstartclick = true; Global variable, whether to start the flag bit, only start to click 
  }) 
} 
 
function Bindstop () { 
  $ ("#stop"). MouseOver (function () { 
    $ (this). CSS ("cursor", ' pointer '); 
  }). Click (function () { 
    clearinterval (WINDOW.GLOBALT1); 
    Window.globalstartclick = false; 
    Window.globaliscleart1 = true; 
  }) 
}

Write here, and then look at each click on how to operate, whether the score, or the wrong end of the game, the following look at the code, the interface has 4*4 a lattice, the need for event delegation, to determine which is a white block is clicked, if the click of the black fast, it into a white block, and add a point can, or wrong words , the game is over.

function Bindclick () { 
  $ ("#inner"). Click (function (e) { 
    if (window.globalstartclick) { 
      var current = $ ( E.target); 
      if (Current.hasclass ("Black")) {Current.removeclass ("black") 
        ; 
        Score (); 
      } else { 
        gameover ();}}} 
  ) ; 
} 

Here is a look at how to calculate the score of the code, and how to achieve automatic acceleration, relatively simple not to say more

Function score () { 
  var score = parseint ($ ("#score"). Text ()); 
  if (score%10 = = 0) { 
    window.globalspeed = 1;        When a certain score is obtained, it is automatically accelerated 
  } 
  $ ("#score"). Text (score + 1); 
 

Finally, let's take a look at how to handle the game at the end the end of the game, the first suspension of the game whereabouts, and then pop-up modal dialog box, so that users choose to return, or to come back, again, the score clear zero, the game interface empty, and then initialized again in the automatic Trigger Start button, start the next round of games,

function Gameover () { 
  //pause game, display modal box 
  $ ("#stop"). Trigger (' click '); 
  Window.globaliscleart1 = true; 
  $ (". Shadow"). Removeclass (' hide '). Next (). Removeclass (' hide '); 
 
  $ ("#again"). Click (function () { 
    clearinterval (WINDOW.GLOBALT1); 
    $ (". Shadow"). AddClass (' hide '). Next (). addclass (' hide '); 
    $ ("#score"). Text (0); 
    ClearAll (); 
    Init (); 
    $ ("#begin"). Trigger (' click '); 
    WINDOW.GLOBALT1 = SetInterval (move,) 
  }); 

Here, the basic whole game is realized, the game is not complicated, but to fully run up, no bug is not so simple, interested can also go to write, if the above code has any problems, you can propose to me.

The above jquery do not step on the simple implementation of the white game is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.