JavaScript implementation don't step on the white Block game program _javascript Skills

Recently a friend to me with JS help imitate do a don't step on the white piece of the small game program, but he gave the source code more trouble, and there is no comment, understand very weak, I have to do the idea of their own this small game, mainly the application of JS to the DOM and array of operations.

Program ideas: As shown: The game area of the CSS set to relative positioning, overflow hidden, two "game board" is arranged on the 24 squares, black each row randomly produced a, "game board" scroll down and alternating display, the black block position of each operation board into an array, Every time you click on the array pop out to make a comparison (I think the bright spot here ...) ）。

Here is the game's GitHub address, you can go to the central menu, click the rightmost download Zip button to download to the desktop a try, HTML and JS, no server.

Download Address

The following is a specific implementation and the key part is annotated.

HTML section:

<! DOCTYPE html>

 
 

CSS section:

Copy Code code as follows:

*{margin:0px;padding:0px;box-sizing:border-box;} Simple reset, and set the box size with box-sizing to calculate the border, easy to calculate the small square position

#gameZone {width:302px;height:602px;border:1px solid green;margin:20px Auto;position:relative;overflow:hidden;}// Game area, more than two pixels to remove the border and there is enough 300*600 space

. square{width:75px;height:100px;float:left;border:1px solid black;

. squareblack{width:75px;height:100px;border:1px solid Black;float:left;background:black; Each small square is 75*100 and sets the background color of the small black squares.

JS section:

Here is the function introduction:

Global variable Initialization

var loc=600;//black block landing failure decision

var count=0;//initialize hit black block total

var locarr=[];//initialize the black block position on the game board

var order= (function () {　　　　

var ord= "A";

return function () {

if (ord== ' Boarda ') ord= ' Boardb ';

else ord= ' Boarda ';

Return ord

}

}) ()

With the closure function so that each created the game board ID is Boarda and boardb, in fact, with a global variable also line, but to a bit of a force ...

function to determine results per click

Function judge () {

var num=this.id.substr (3)//Gets the ID number of the element

if (Num!=locarr.pop ()) {//vs. Position array pop out

cl　　　　　　　　Eartimeout (timer);

Alert ("Your score is:" "+count+" points!)　　　　　　　　");

Return Failed purge timer, settlement score.　　　　　　　　

}else{

loc+=100; 

this.style.background= "Silver";

count+=1;//successfully add the height of the square to the floor, change the background color of the squares, hit the number +1

}

if (count!=0&&count%15==0) {

cleartimeout　　　　　　　　(timer);

newtimer=50-count/15*5;

Timer=setinterval (' Fall () ', newtimer);

The}//will speed up a little after each hit of 15, which can be defined by itself.

}

A random number that produces the position of a small black box in a large box, which is called each time the game board is created, and the location of the small black block is defined according to the resulting number

function Generaterand () {

var numarr=[];

for (Var j=0;j<6;j++) {

var num=math.floor (Math.random () *4) +j*4;

Numarr.push (num);

return

Numarr;

}

Each call generates a game board to scroll down on top of the game area and push the number of its black part into the Locarr

function Drawboard () {

var temarr=generaterand ();//This applies a temporary location array, in order to prevent the position between the two game boards conflict.　　　　

Locarr=temarr.concat (Locarr);//connect the temporary array to the global location array

var board=document.createelement (' div ');

Board.setattribute (' id ', order ());

board.style.position= "Absolute";

board.style.top= ' -600px ';

for (Var i=0;i<24;i++) {

var ele=document.createelement (' div ');

Ele.setattribute (' id ', "ele" +i);

if (Temarr.indexof (i) >-1) {  //Determine whether the ID sequence of the currently created small squares belongs to an array of temporary locations

Ele.setattribute (' class ', ' Squareblack ') 
   }else{

ele.setattribute (' class ', ' Square ');

ele.addeventlistener (' click ', Judge,false); Add a click to the decision function for each small square judge

Board.appendchild (ele); 
   
     >

var Gamezone=document.getelementbyid (' GameZone ');

Gamezone.appendchild (board);

}


   

Find the two game boards that exist in the script to scroll them down

function Fall () {

Gamezone=document.getelementbyid (' GameZone ');

var Boarda=document.getelementbyid (' Boarda ');//Since AB Two game boards are global all the time, there is no need to define the logical Var anowtop=parseint when it is not found

( Boarda.style.top);//Because the top position obtained is the XXXPX type, converting it to an integer is easy to handle with a parseint ().

if (anowtop==595) {///This number is 595 instead of 600 because after this frame is deleted, the next frame is just 600px, which makes the two game boards perfectly connected.　　　　　　　　

Gamezone.removechild (Boarda);

Drawboard ()//Remove the game board from the game area and make a new one at the top.　　　　

}

anowtop+=5;

boarda.style.top=anowtop+ "px";

var Boardb=document.getelementbyid (' Boardb ');

var bnowtop=parseint (boardb.style.top);

if (bnowtop==595) {

gamezone.removechild (BOARDB);

Drawboard ();

}

bnowtop+=5;

boardb.style.top=bnowtop+ "px";

loc-=5;

if (loc==0) {

cleartimeout (timer);

Alert ("Your score is:" "+count+" points!)　　　　　　　　");

return;

//Every frame will be reduced to the landing of 5, when the landing is determined to 0 when the landing, settlement scores.

}

Write the principal call in the Window.onload function so that the game area of the page is loaded and then the function is called.

Window.onload=function () {

drawboard ();

Fall ();

var timer=setinterval (' Fall () ', m);

}

Game extensions:

Add page UI: Because the initial HTML is very simple, so the UI is also good to modify, set the button, click Trigger Start function.

Change the difficulty of the game: Modify the value of the setinterval, you can also modify the number of intervals in the judge function, or the drop to accelerate the expression of optimization.

Increase the score ranking, etc.: Connect the server with Ajax, write the results to the database after the game is finished, and refer to the list in the data.

To Arcade Mode: Remove timing, modify the Judge function, so that each click on the game board drop a small square height. Set totals, start timing, end timings.