js实现弹幕飞机效果


Posted in Javascript onAugust 27, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
js实现前端界面导航栏下拉列表
Aug 27 #Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 #Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 #Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 #Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 #Javascript
You might like
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python类共享变量操作
2020/09/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
优秀教师主要事迹
2014/02/01 职场文书
校庆筹备方案
2014/03/30 职场文书
情人节活动总结范文
2015/02/05 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript