好资源导航 » 文章资讯 » js实现弹幕飞机效果

js实现弹幕飞机效果

2023-07-17 21:34:03 72

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







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-keyframesmymove
{
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:30pxsolidtransparent;
border-right:30pxsolidtransparent;
border-bottom:10pxsolidred;
}
div{
text-align:center;
line-height:30px;
}





飞机

开始| 暂停 varkey=document.body.onkeydown=f;//注册keydown事件处理函数 varclientH=document.body.clientHeight;//获取body高 varclientW=document.body.clientWidth;//获取body宽 varobj=document.getElementById('obj');//飞机对象 varborderX=parseInt(getComputedStyle(obj,null).getPropertyValue('border-left')); varborderY=parseInt(getComputedStyle(obj,null).getPropertyValue('border-bottom')); varmovePx=10;//飞机每次移动的距离 varspeed=500;//雨下落速度 vardistance=10;//雨下落距离 varrainleft=0;//弹幕雨x坐标 varraintop=0;//弹幕雨y坐标 //生成雨 functionsetrain(){ rainleft=parseInt(Math.random()*clientW); raintop=0;//parseInt(Math.random()*clientH); letdiv=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); } //雨下落 functiondownrain(){ varmyTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 varmyLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 letdiv=document.getElementsByClassName('div'); //遍历all雨滴 for(leti=0;iclientH){ div[i].parentNode.removeChild(div[i]); }; } } //开始 document.getElementById('start').onclick=start; functionstart(e){ vare=e||window.event;//标准化事件处理 inter=setInterval((setrain),speed); inter1=setInterval((downrain),speed); inter2=setInterval((delrain),speed); } //暂停 functionstop(){ clearInterval(inter); clearInterval(inter1); clearInterval(inter2); } //移动飞机 functionf(va){ vare=e||window.event;//标准化事件处理 lets='';//val.type+""+val.key;//获取键盘事件类型和按下的值 letkey=va.key; varmyTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标parseInt(obj.style.top); varmyLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标parseInt(obj.style.left); varmyWidth=borderX; varmyHeight=borderY; varmove=0; if(key=='w'){ move=myTop-movePx;//每次移动10 if(move<0||move>clientH){ returnfalse;//不能超过边界 } obj.style.top=move+'px'; s='上'; } if(key=='s'){ move=myTop+movePx; if(move<0||move>clientH-myHeight){ returnfalse; } obj.style.top=move+'px'; s='下'; } if(key=='a'){ move=myLeft-movePx; if(move<0||move>clientW){ returnfalse; } obj.style.left=move+'px'; s='左'; } if(key=='d'){ move=myLeft+movePx; if(move<0||move>clientW-myWidth){ returnfalse; } obj.style.left=move+'px'; s='右'; } //obj.innerText=s;//设置文本&清楚之前的元素 //console.log(move+'top:'+myTop+'left:'+myLeft); }/*f()end--*/

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现弹幕飞机效果

热门推荐

随机推荐