js实现弹幕飞机效果
更新时间：2020年08月27日 14:08:46 作者：弯月liang
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
javawscript 三级菜单的实现代码。2009-07-07
js 复制网页内容的方法代码有很多不过要兼容各浏览器就不多了，下面有个不错的方法，大家可以尝试操作下2013-12-12
这篇文章主要介绍了JS+php后台实现文件上传功能,结合实例形式分析了javascript前台表单数据提交与后台php文件传输处理相关操作技巧,需要的朋友可以参考下2019-03-03
在JavaScript里，函数(todoA、todoB、todoC)就是对象，“()”的作用就是就是执行函数对象，二者简单地组合一下就能够让代码清晰简洁很多了，何乐不为呢？2010-03-03
这篇文章主要为大家介绍了如何使用Flutter动画魔法使UI元素活起来方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要给大家介绍了关于微信小程序全局变量改变监听的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了JS简单实现无缝滚动效果,结合完整实例形式分析了javascript实现图片无缝滚动效果的实现技巧,涉及javascript结合时间函数定时触发动态修改页面元素属性的相关操作方法,需要的朋友可以参考下2016-08-08
在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：2013-03-03
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
这篇文章主要介绍了JavaScript控制输入框中只能输入中文、数字和英文的方法,基于正则验证实现字符输入限制功能,具有一定参考借鉴价值,需要的朋友可以参考下2017-03-03
DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。整个浏览器网页就是一个Dom树形结构，这篇文章主要介绍了JavaScript DOM节点操作方式2022-10-10
最新评论