初学JS——利用JS制作的别踩白块儿（街机模式）小游戏-白红宇

初学JS——利用JS制作的别踩白块儿（街机模式）小游戏

阅读量：5260 次

发布时间：2019-06-14

本文共 2998 字，大约阅读时间需要 9 分钟。

　　这个是上个星期5写的了，当时是突然想写个游戏，就想到了别踩白块儿，当时的想法是

可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种，以我目前会的技术想不出怎么写，

但是如果是街机模式，通过你每按一次按键之后他像下跳一格这样的就非常好实现了。

　　通过我目前会的知识，实现的步骤大概是这样的：

　　建一个4X4的表格，制作2张150X100的图片，一张全白色，一张全黑色，命名为0.JPG,1.JPG

就是说当文件名为0的时候就是白色的块，为1的时候就是黑色的块。

　　然后先用白色的图片填充表格内所有的TD。然后通过获取表格内的TAGNAME：

　　x=document.getElementById("biao");//不要吐槽我的命名方式→_→　　x1=x.getElementsByTagName("img");

这样就可以获取一个图片的数组，这样表格从上到下图片分别是x1[0]至x1[15]。

　　接着是我从百度找的一个获取随机数的方法：

                            
function
fRandomBy(under, over)
{ 
    
//获取随机数方法
    
switch
(arguments.length)
    
{ 
        
case
1: 
return
parseInt(Math.random()*under+1);
        
case
2: 
return
parseInt(Math.random()*(over-under+1) + under);
        
default
: 
return
0;
        
}
}   
         
       

调用函数通过fRandomBy(最小数，最大数)可以获取指定范围内的一个随机数。

然后就可以声明4个int变量line1,line2,line3,line4 代表表格内的第一行第二行第三行第四行，每行内图片数组的序号就是0-3,4-7,8-11,12-5

line1=fRandomBy(12,15);line2=fRandomBy(8,11);line3=fRandomBy(4,7);line4=fRandomBy(0,3);

接着将获取到随机的每行数字lineX 的图片数组序号，改变他们的SRC为1.jpg

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

这样初始化随机黑块就搞定了。

　　接着是写一个当你按键按到正确黑块的时候他会跳过这个黑块并产生新的黑块的方法，这里同样通过改变之前声明的LINE变量，将LINE2的值+4赋值给LINE1，LINE3的值+4赋值给LINE2以此类推，LINE4的值重新获取一个随机数。然后重新删除黑块并绑定新的黑块。

                            
function
newKuai()
{ 
    
//生成新块
    
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++;
}
function
deKuai()
{ 
    
//删除所有黑块
    
for
(
var
i=0;i<16;i++)
    
{ 
        
x1[i].src=
"0.jpg"
;
    
}
}
         
       

　　接着就是写一个检验是否按到块的方法,通过检测按到的KEYCODE所在的块是否是1.JPG，如果按错，就会结束游戏并上传分数。。。

                            
function
cheKuai(keycode)
{ 
    
//判断是否按中块
    
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()
{ 
    
//游戏结束时的操作
    
alert(
"你的分数是"
+fen);
    
stopCount();
    
location.href=
"action.php?name="
+document.getElementById(
"player"
).value+
"&fen="
+fen;
    
tc=20;
    
deKuai();
    
fen=0;
}
         
       

　　最后就是写一个获取键盘按键指令的方法。。。。(这个我是BAIDU的。。。。

                            
document.onkeydown=
function
(event)
{ 
    
//检测按键方法
  
var
e = 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);
  
}
}
         
       

　　接着可以写一个计时器，时间到时执行GAMEOVER方法。。。。（这个我也是百度的我就不贴了。。。大家可以去下面的演示站看源代码)

于是一个超级简易的别踩白块儿就写完了。。。。。。

PS:就连我自己都想吐槽，很多方法。。。应该可以有更好的思路或者写法。。。。。初学JS还有很多地方都不懂，希望大家能和大家多多交流。。。。)

（注意看的黑块应是最下面那行）

转载于:https://www.cnblogs.com/zhangxinerfenxiang/p/6337212.html

你可能感兴趣的文章