js实现弹幕飞机效果_JavaScript

本文实例为大家分享了js实现弹幕飞机效果的具体代码，供大家参考，具体内容如下

				?

									<!DOCTYPE html>

									<html>

									<head>

									 <meta charset="utf-8">

									 <title></title>

									 <style type="text/css">

									 body{

									   width: 70vw;/*长宽最好是obj的倍数*/

									   height: 90vh;

									   border-width: 10px;

									   border-style: solid;

									   border-color: blue;

									   line-height:600px;/*文本垂直居中*/

									   text-align: center;/*文本水平居中*/

									   position: relative;/*相对定位*/

									   left: 0px;

									   top: 0px;

									  }

									  /*开场动画*/

									 @-webkit-keyframes mymove

									 {

									 from {top:50vh;}

									 to {top:100px;}

									 }

									 #obj{

									 -webkit-animation-name:mymove;

									 -webkit-animation-duration:1s;

									 -webkit-animation-timing-function:linear;

									   position: absolute;

									   left: 30vw;

									   top: 50vh;

									 width: 0px;

									   height: 0px;

									   border-left: 30px solid transparent; 

									 border-right: 30px solid transparent; 

									 border-bottom: 10px solid red; 

									 }

									 div{

									   text-align: center;

									   line-height:30px;

									  }

									 </style>

									</head>

									<body>

									<!--弹幕飞机

									1.飞机可以移动

									2.屏幕顶部随机弹幕雨

									3.弹幕雨碰到飞机-失败

									4.记录分数

									-->

									<div id='obj'>飞机</div>

									<button id='start'>开始</button> | 

									<button onclick="stop()">暂停</button>

									</body>

									<script type="text/javascript">

									 var key = document.body.onkeydown =f; //注册keydown事件处理函数

									 var clientH= document.body.clientHeight;//获取body高

									 var clientW= document.body.clientWidth;//获取body宽

									 var obj=document.getElementById('obj');//飞机对象

									 var borderX=parseInt(getComputedStyle(obj,null).getPropertyValue('border-left'));

									 var borderY=parseInt(getComputedStyle(obj,null).getPropertyValue('border-bottom'));

									 var movePx=10;//飞机每次移动的距离

									 var speed=500;//雨下落速度

									 var distance=10;//雨下落距离

									 var rainleft=0;//弹幕雨x坐标

									 var raintop=0;//弹幕雨y坐标

									 //生成雨

									 function setrain(){

									 rainleft=parseInt(Math.random()*clientW);

									  raintop=0;//parseInt(Math.random()*clientH);

									 let div=document.createElement('div');

									 div.className ='div';

									 div.style.borderRadius='50%';

									 div.style.width='6px';

									 div.style.height='10px';

									 div.style.backgroundColor='pink';

									 div.style.position = 'absolute';

									  div.style.left=rainleft + 'px';

									  div.style.top=raintop + 'px';

									 document.body.appendChild(div);

									 }

									 //雨下落

									 function downrain(){

									 var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标

									  var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标

									 let div=document.getElementsByClassName('div');

									 //遍历all雨滴

									 for(let i=0;i<div.length-1;i++){

									 let divleft=parseInt(div[i].style.left);

									 let divtop=parseInt(div[i].style.top);

									 div[i].style.top=divtop+distance+'px';

									 //判断飞机是否被击中

									 if(Math.abs(divtop-myTop)<borderY && Math.abs(divleft-myLeft)<borderX){

									 console.log('被击中了 borderY:'+borderY+' borderX:'+borderX);

									 console.log('------- myTop:'+myTop+' myLeft:'+myLeft);

									 console.log('------- rainY:'+divtop+' rainX:'+divleft);

									 stop();

									 alert('被击中了');

									 }

									 }

									 }

									 //清除落地的雨

									 function delrain(){

									 let div=document.getElementsByClassName('div');

									 //遍历all雨滴

									 for(let i=0;i<div.length-1;i++){

									 // div[i].style.left

									 if(parseInt(div[i].style.top)>clientH){

									 div[i].parentNode.removeChild(div[i]);

									 };

									 }

									 }

									 //开始

									 document.getElementById('start').onclick=start;

									 function start(e){

									 var e = e || window.event; //标准化事件处理

									 inter=setInterval((setrain),speed);

									 inter1=setInterval((downrain),speed);

									 inter2=setInterval((delrain),speed);

									 }

									 //暂停

									 function stop(){

									 clearInterval(inter);

									 clearInterval(inter1);

									 clearInterval(inter2);

									 }

									 //移动飞机

									 function f (va) {

									  var e = e || window.event; //标准化事件处理

									  let s = '';//val.type + " " + val.key; //获取键盘事件类型和按下的值

									  let key=va.key;

									  var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 parseInt(obj.style.top);

									  var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 parseInt(obj.style.left);

									  var myWidth=borderX;

									  var myHeight=borderY;

									  var move=0;

									  if(key=='w'){

									   move=myTop-movePx;//每次移动10

									   if(move<0 || move>clientH){

									    return false;//不能超过边界

									   }

									   obj.style.top=move+'px';

									   s='上';

									  }

									  if(key=='s'){

									   move=myTop+movePx;

									   if(move<0 || move>clientH-myHeight){

									    return false;

									   }

									   obj.style.top=move+'px';

									   s='下';

									  }

									  if(key=='a'){

									   move=myLeft-movePx;

									   if(move<0 || move>clientW){

									    return false;

									   }

									   obj.style.left=move+'px';

									   s='左';

									  }

									  if(key=='d'){

									   move=myLeft+movePx;

									   if(move<0 || move>clientW-myWidth){

									    return false;

									   }

									   obj.style.left=move+'px';

									   s='右';

									  }

									  // obj.innerText=s;//设置文本 & 清楚之前的元素

									  // console.log(move+' top:'+myTop+' left:'+myLeft);

									 } /*f() end--*/

									</script>

									</html>