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

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 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:

12345678910

functionfRandomBy(under, over){    //获取随机数方法    switch(arguments.length)    {        case1: return parseInt(Math.random()*under+1);        case2: returnparseInt(Math.random()*(over-under+1) + under);        default: return0;        }}

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

1234	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.

12345678910111213141516171819202122

functionnewKuai(){    //生成新块    deKuai();//先删除所有生成的黑块    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++;}functiondeKuai(){    //删除所有黑块    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 ...

1234567891011121314151617181920212223242526272829303132333435363738

functioncheKuai(keycode){    //判断是否按中块    switch(keycode)    {        case65:        vari=getName(x1[12].src);        //alert(i);        if(i=="1"){newKuai();}        else{gameover()}        break;        case83:        vari=getName(x1[13].src);        if(i=="1"){newKuai();}        else{gameover()}        break;        case75:        vari=getName(x1[14].src);        if(i=="1"){newKuai();}        else{gameover()}        break;        case76:        var i=getName(x1[15].src);        if(i=="1"){newKuai();}        else{gameover()}        break;    }}functiongameover(){    //游戏结束时的操作    alert("你的分数是"+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 ....)

123456789101112131415161718192021

document.onkeydown=function(event){    //检测按键方法  vare = event || window.event || arguments.callee.caller.arguments[0];  if(e && e.keyCode==65)  { // 按 a    cheKuai(e.keyCode);  }  if(e && e.keyCode==83)  { // 按 s    cheKuai(e.keyCode);  }  if(e && e.keyCode==75)  { // 按 k    cheKuai(e.keyCode);  }  if(e && e.keyCode==76)  { // 按 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 (watch the black block should be the bottom line)

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