原生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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！