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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
create-react-app中添加less支持的实现
Nov 15 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
详解python之简单主机批量管理工具
2017/01/27 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python匿名函数及应用示例
2019/04/09 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
初中作文评语
2014/12/25 职场文书
教学反思怎么写
2016/02/24 职场文书
关于保护环境的建议书
2019/06/24 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Python jiaba库的使用详解
2021/11/23 Python