原生js实现打字动画游戏
这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考。
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <style> body,button{ margin:0; padding:0; } body{ background:#333; } #game{ width:400px; margin:0auto; } #start{ width:80px; height:40px; } span{ margin:20px; color:white; } .letter{ position:absolute; color:yellow; font:bold30px"Arial"; } </style> <script> window.onload=function(){ varstart=document.getElementById("start"); varscroll=document.getElementById("scroll"); vartime=document.getElementById("time"); varg=1;//Gravity vartimenum=0;//时间的计数 varnum=0;//成绩的计数 vargameover=false; vartimeandtime=null; varletters=null; //字母放在一个字符串里面,随机选取 varstr="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; //点击开始按钮,字母会自动生成,从顶部,以随机速度落下 //用户操作:按钮对应字母的按钮,然后字母就会消失 //用户没有点击到的按钮到达底部以后会回到顶上重新落下; //用户清除所有字母后,弹出对话框,显示分数和文字。 //封装一个对象,里面包含获取事件对象,页面位置,清除冒泡,获取事件目标的兼容性方法 vareventUtil={ getEvent:function(event){ returnevent||window.event; }, getPageX:function(event){ returnevent.pageX||event.clientX+document.documentElement.scrollLeft; }, getPageY:function(event){ returnevent.pageY||event.clientY+document.documentElement.scrollTop; }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }, getTarget:function(event){ returnevent.target||event.srcElement; } }; start.onclick=function(){ for(vari=0;i<26;i++){ newletter(); } letters=document.body.children;//将页面中所有的div全部放入一个伪数组中,第一个除外,属于game,因此遍历从1开始 //在键盘上,按下对应的字母键,字母会立即消失,同时分数会增加,并且在上面重新生成; document.onkeydown=function(event){ varevt=eventUtil.getEvent(event); varkeychar=String.fromCharCode(evt.keyCode);//将按下的字母键盘码转换成直接的大写字母 for(vari=1;i<letters.length;i++){ if(keychar===letters[i].innerHTML){ num++; scroll.innerHTML=num; document.body.removeChild(letters[i]); } } } timeandtime=setInterval(function(){ timenum=timenum+1; console.log(letters); if(letters.length==1){//当伪数组的长度只有一个时,那么游戏就结束 gameover=true; clearInterval(timeandtime); alert("用时"+timenum+"秒,再接再厉!突破10秒!"); }else{ time.innerHTML=timenum; } },1000) } //封装函数 functionletter(){ this.x=Math.random()*900+100;//设置位置在100-1000之间 this.y=0; this.speedY=Math.random()*4+1;//速度随机设置在1-5之间 this.value=str[parseInt(Math.random()*25)];//在26个字母中随机生成一个字母 varletDiv=document.createElement("div"); letDiv.className="letter"; letDiv.style.top=this.y+"px"; letDiv.style.left=this.x+"px"; letDiv.innerHTML=this.value; document.body.appendChild(letDiv); //字母往下掉 varthat=this; this.timer=setInterval(function(){ //leader=leader+step; that.y=that.y+that.speedY; if(that.y>=client().height-letDiv.offsetHeight){ that.y=0; that.x=Math.random()*900+100; } if(!gameover){ letDiv.style.left=that.x+"px"; letDiv.style.top=that.y+"px"; }else{ clearInterval(that.timer); } },15) } //获取可视窗口的宽度和高度窗,兼容性问题 functionclient(){ return{ width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0, height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0 }; } } </script> </head> <body> <divid="game"> <buttonid="start">开始</button> <span>得分:<iid="scroll">0</i></span> <span>计时:<iid="time">0</i></span> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!