欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js实现弹幕飞机效果

程序员文章站 2022-05-01 19:46:11
本文实例为大家分享了js实现弹幕飞机效果的具体代码，供大家参考，具体内容如下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。 

相关标签： js 弹幕飞机

上一篇： MySQL(二)select检索数据

下一篇： 最好的那颗白菜，都给了你

推荐阅读