我的第一个键盘游戏

最新推荐文章于 2024-10-09 16:20:31 发布

小菜鸟程序员

最新推荐文章于 2024-10-09 16:20:31 发布

阅读量650

点赞数

文章标签： JavaScript HTML 测试游戏

本文链接：https://blog.csdn.net/u011096003/article/details/9138295

版权

----------》1 游戏的目的

----------》2 游戏的开发与测试

----------》3 游戏的心得

一、游戏的目的就是练习键盘打字的速度。

二、主要用的技术HTML, javascript 语言测试是为了游戏的正确性减少BUG 的出现。

三、觉得用javascript做游戏很给力。

以下是游戏的代码

<html>
<head>
<title>键盘游戏</title>
</head>
<script>
var timer;
var arr=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
function strat(){
insert();
timer=setInterval("move()",300);
document.οnkeydοwn=keydown;

}
function stop(){
for(j=0;j<8;j++){
clearInterval(timer);
document.οnkeydοwn=null;
}
}
function move(){
//移动的像素
div1.style.top=parseInt(div1.style.top)+20;
div11.style.top=parseInt(div11.style.top)+20;
div2.style.top=parseInt(div2.style.top)+20;
div22.style.top=parseInt(div22.style.top)+20;
div3.style.top=parseInt(div3.style.top)+20;
div33.style.top=parseInt(div33.style.top)+20;
//条件假设
if(parseInt(div1.style.top)>=500){div1.style.top=50;insert();}
if(parseInt(div11.style.top)>=500){div11.style.top=50;insert();}
if(parseInt(div2.style.top)>=500){div2.style.top=50;insert();}
if(parseInt(div22.style.top)>=500){div22.style.top=50;insert();}
if(parseInt(div3.style.top)>=500){div3.style.top=50;insert();}
if(parseInt(div33.style.top)>=500){div33.style.top=50;insert();}

if(div_1==realkey){div1.style.top=50;insert();}
if(div_11==realkey){div11.style.top=50;insert();}
if(div_2==realkey){div2.style.top=50;insert();}
if(div_22==realkey){div22.style.top=50;insert();}
if(div_3==realkey){div3.style.top=50;insert();}
if(div_33==realkey){div33.style.top=50;insert();}

}

function random(){
if(div1){
id=parseInt(Math.random()*arr.length);
div_1=arr[id];
}
if(div11){
id=parseInt(Math.random()*arr.length);
div_11=arr[id];
}
if(div2){
id=parseInt(Math.random()*arr.length);
div_2=arr[id];
}
if(div22){
id=parseInt(Math.random()*arr.length);
div_22=arr[id];
}
if(div3){
id=parseInt(Math.random()*arr.length);
div_3=arr[id];
}
if(div33){
id=parseInt(Math.random()*arr.length);
div_33=arr[id];
}

}
function insert(){
random();
div1.innerHTML=div_1;
div11.innerHTML=div_11;
div2.innerHTML=div_2;
div22.innerHTML=div_22;
div3.innerHTML=div_3;
div33.innerHTML=div_33;
}
function keydown(e){
/*
//realkey=String.fromCharCode(e.which);//火狐浏览器
//realkey=String.fromCharCode(event.keyCode);//360浏览器
*/
　　　 var Key=0,e=e||event;
　　　 Key=e.keyCode||e.which||e.charCode;
realkey=String.fromCharCode(Key);
}
function next(){
insert();
timer=setInterval("move()",200);
document.οnkeydοwn=keydown;
}
</script>
<body>
<button οnclick="strat()">开始</button>
<button οnclick="stop()">停止</button>
<button οnclick="next()">下一关</button>

<div style="position:absolute;width:600;height:600;background:black;">
<div id="div1" style="position:absolute;width:30;height:30;left:0;top:50;text-align:center;background:yellow;"></div>
<div id="div11" style="position:absolute;width:30;height:30;left:100;top:50;text-align:center;background:purple;"></div>
<div id="div2" style="position:absolute;width:30;height:30;left:200;top:50;text-align:center;background:red;"></div>
<div id="div22" style="position:absolute;width:30;height:30;left:300;top:50;text-align:center;background:green;"></div>
<div id="div3" style="position:absolute;width:30;height:30;left:400;top:50;text-align:center;background:blue;"></div>
<div id="div33" style="position:absolute;width:30;height:30;left:500;top:50;text-align:center;background:cyan;"></div>
</div>
</body>
</html>