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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
slice函数的用法 之不错的应用
Dec 29 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
Javascript变量作用域详解
Dec 06 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
详解vue路由
Aug 05 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery检查事件是否触发的方法
2015/06/26 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
Python中的异常处理学习笔记
2015/01/28 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python3实现猜数字游戏
2020/12/07 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
五好党支部事迹材料
2014/02/06 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
项目建议书怎么写
2014/05/15 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
煤矿安全保证书
2015/02/27 职场文书
2016高考感言
2015/08/01 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书