欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)彈幕飛機效果

 更新時間：2020年08月27日 14:08:46   作者：彎月liang  
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)彈幕飛機效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)彈幕飛機效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 body{
   width: 70vw;/*長寬最好是obj的倍數(shù)*/
   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.記錄分?jǐn)?shù)
-->
 
<div id='obj'>飛機</div>
 
<button id='start'>開始</button> | 
<button onclick="stop()">暫停</button>
 
</body>
<script type="text/javascript">
 
 var key = document.body.onkeydown =f; //注冊keydown事件處理函數(shù)
 
 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坐標(biāo)
 var raintop=0;//彈幕雨y坐標(biāo)
 
 //生成雨
 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坐標(biāo)
  var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//獲取精靈x坐標(biāo)
 
 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; //標(biāo)準(zhǔn)化事件處理
 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; //標(biāo)準(zhǔn)化事件處理
  let s = '';//val.type + " " + val.key; //獲取鍵盤事件類型和按下的值
  let key=va.key;
  var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//獲取精靈y坐標(biāo) parseInt(obj.style.top);
  var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//獲取精靈x坐標(biāo) 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;//設(shè)置文本 & 清楚之前的元素
  // console.log(move+' top:'+myTop+' left:'+myLeft);
 
 } /*f() end--*/
 
</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論