打字游戏简约版
首先将要产生的按键存到数组当中,随机产生角标,获得按键,创建标签,添加到屏幕当中,然后获得按键事件,与每一个值进行比较,如果有一样的,则删除,如果没有,则随机添加几个字母,还有经过指定时间,添加合适数量的字母,直到全部删除完,结束。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打字游戏</title> <style type="text/css"> #div1{ width:100%; background:green; } #div1 h2{ float: left;m color:red; font-size: 50px; margin-left:40px; } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1');//获得div元素 var arr=['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'];//可以添加的元素 var h2s=oDiv.getElementsByTagName('h2');//得到div中的h2标签 var timer;//定义定时器变量 function tianjia(){//添加元素的方法 if(h2s.length!=0){//如果存在h2标签,说明还没有打完,再添加 var suiji=Math.floor(Math.random()*26);//随机产生数组角标 var zimu=arr[suiji];//获得对应角标的字母 var h2=document.createElement('h2');//创建h2标签 h2.innerHTML=zimu;//将内容添加到h2标签中 oDiv.appendChild(h2);//将h2标签添加到div中 }else{ alert('你赢了');//如果没有h2标签了,弹出你赢了 } } for(var i=0;i<5;i++){//首先先添加5的元素,在div当中有一个h2标签,才能添加 tianjia(); } var obtn1=document.getElementById('1');//得到1按钮 obtn1.onclick=function(){//当点击1按钮时 clearInterval(timer);//关闭所有其他定时器 timer=setInterval(tianjia,1000);//每秒执行一次添加函数 } var obtn2=document.getElementById('2');//同理 obtn2.onclick=function(){ clearInterval(timer); timer=setInterval(tianjia,500); } var obtn3=document.getElementById('3'); obtn3.onclick=function(){ clearInterval(timer); timer=setInterval(tianjia,330); } window.onkeydown=function(e){//键盘按键事件 var result;//定义全局变量 var ev=e||window.event;//获得兼容性事件对象 var jian=String.fromCharCode(ev.keyCode);//将按键的Code值转化为准确按键 for(var j=0;j<h2s.length;j++){//如果有你按下的键,则删除 if(jian==h2s[j].innerHTML){ result=oDiv.removeChild(h2s[j]); } } if(!result){//如果你按的没有这个元素,则添加3个字母 for(var n=0;n<3;n++){ tianjia(); } } } } </script> </head> <body> 每秒增加数量:<input id='1' type="button" value="1"/> <input id="2" type="button" value="2"/> <input id="3" type="button" value="3"/> <div id="div1"> <h2 id="suiji">Q</h2> </div> </body> </html>