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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
Element InputNumber计数器的使用方法
Jul 27 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数组(array)输出的三种形式详解
2013/06/05 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
matplotlib作图添加表格实例代码
2018/01/23 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python函数与方法的区别总结
2019/06/23 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python文件排序的方法总结
2020/09/13 Python
门卫班长岗位职责
2013/12/15 职场文书
党章学习思想汇报
2014/01/14 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
政工例会汇报材料
2014/08/26 职场文书
迟到检讨书范文
2015/01/27 职场文书
小学班长竞选稿
2015/11/20 职场文书
素质教育培训心得体会
2016/01/19 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
golang 在windows中设置环境变量的操作
2021/04/29 Golang
python flappy bird小游戏分步实现流程
2022/02/15 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
keepalived + nginx 实现高可用方案
2022/12/24 Servers