Beginner js--Use JS to make the white block (Arcade mode) games

This is last week 5 wrote, was suddenly want to write a game, think of not stepping on white, then the idea is

Maybe the normal mode of the white block because his "block" is rolling upward this, to my current technology can not think how to write,

But if it's Arcade mode, after you press the button every time he jumps like a grid, it's pretty good.

Through my current knowledge, the steps to achieve this are as follows:

Build a 4x4 table, make 2 pictures of 150x100, one full white, one full black, named 0. Jpg,1.jpg

That is, when the file name is 0 is the white block, 1 is the black block.

Then fill in all the TD in the table with the white picture first. Then by getting the tagname in the table:

X=document.getelementbyid ("Biao"); // Don't spit my name in the way →_→ x1=x.getelementsbytagname ("img");

This allows you to get an array of images so that the table is x1[0] to x1[15] from the top to the next.

Then I was looking for a way to get a random number from Baidu:

function Frandomby (under, over) {//Get random number method switch (arguments.length) {case     1:return parseint (math.random () *under+ 1);     Case 2:return parseint (Math.random () * (over-under+1) + under);     Default:return 0;         } }    

The calling function can get a random number in the specified range by Frandomby (minimum number, maximum number).

Then you can declare 4 int variable line1,line2,line3,line4 represents the first row in the table, the second row, the third row, the fourth row, and the sequence number of the picture array in each row is 0-3,4-7,8-11,12-5

Line1=frandomby (12,15); line2=frandomby (8,11); Line3=frandomby (4,7); line4=frandomby ( 0,3);

Then will get to the random number of each line of Linex picture array sequence number, change their src to 1.jpg

X1[line1].src= "1.jpg"; x1[line2].src= "1.jpg"; x1[line3].src= "1.jpg"; x1[line4].src= "1.jpg";

This initializes the random black block and it's done.

Then write a method that will skip the black block and produce a new Black block when you press the key to the correct black block, and also assign a value of LINE2 value +4 to Line1,line3 value +4 to LINE2 and so on, by changing the previously declared line variable. The value of the LINE4 gets a random number again. Then remove the black block and bind the new Black block again.

function Newkuai () {//Generate new block Dekuai ();//First Delete all generated black blocks Line1=line2+4;line2=line3+4;line3=line4+4;line4=frandomby (0,3); x1 [line1].src= "1.jpg"; x1[line2].src= "1.jpg"; x1[line3].src= "1.jpg"; x1[line4].src= "1.jpg"; fen++;} function Dekuai () {//delete all Black blocks for (Var i=0;i<16;i++) {x1[i].src= "0.jpg";}}

Then is to write a test whether to press the Block method, by detecting whether the block KeyCode is 1.JPG, if the wrong, will end the game and upload scores ...

function Chekuai (keycode) {//Determines whether to press medium block switch (keycode) {case 65:var i=getname (X1[12].SRC);//alert (i); if (i== "1") { Newkuai ();} Else{gameover ()}break;case 83:var i=getname (X1[13].SRC); if (i== "1") {Newkuai ();} Else{gameover ()}break;case 75:var i=getname (X1[14].SRC); if (i== "1") {Newkuai ();} Else{gameover ()}break;case 76:var i=getname (X1[15].SRC); if (i== "1") {Newkuai ();} Else{gameover ()}break;}} function Gameover () {//Action alert at end of game ("Your score is" +fen); Stopcount (); location.href= "Action.php?name=" + document.getElementById ("Player"). value+ "&fen=" +fen;tc=20;dekuai (); fen=0;}

The last is to write a way to get the keyboard button instructions .... (This is my Baidu's ....)

  Document.onkeydown=function (Event)  {  //detection key method    var e = Event | | window.event | | Arguments.callee.caller.arguments[0];    if (e && e.keycode==65)    {//press a      Chekuai (E.keycode);    }    if (e && e.keycode==83)    {//press S       Chekuai (E.keycode);    }     if (e && e.keycode==75)    {//press K      Chekuai (E.keycode);    }    if (e && e.keycode==76)    {//press L      Chekuai (E.keycode);    }  }

Then you can write a timer, time to execute the Gameover method .... (This I also Baidu's I will not post ... You can go to the following demo station to see the source code)

So a super simple do not step on the white pieces of writing finished ...

PS: Even I want to spit groove, a lot of ways ... There should be a better way of thinking or writing ..... Beginner JS There are many places do not understand, I hope we can communicate with you more .... )

Don't step on the white block demo

Beginner js--Use JS to make the white block (Arcade mode) games