原生js实现移动小球(碰撞检测)


Posted in Javascript onDecember 17, 2020

本文实例为大家分享了js实现移动小球的具体代码,供大家参考,具体内容如下

</head>
<style>
 *{margin: 0;
  padding:0;}
 #main{margin: 0px auto;position: relative;}
 #main div{overflow: hidden;position: absolute;width: 50px;height: 50px;opacity: 0.5;
  -moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;}
</style>
<body>
 <div id="main">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

 <script>
 var main = document.getElementById('main');
 var circles = main.getElementsByTagName('div');
 var st = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
 var json = [],arr=[],color = [];
 var maxW = 0;
 var maxH = 0;
 var cwidth = circles[0].offsetWidth;
 var cheight = circles[0].offsetHeight;

 //根据浏览器窗口的大小自动调节小球的运动空间
 window.onresize=function(){
  var main = document.getElementById('main');
  maxW=window.innerWidth-circles[0].clientWidth;
  maxH=window.innerHeight-circles[0].clientHeight;
  main.style.width = window.innerWidth+'px';
  main.style.height = window.innerHeight+'px';

 }
 onresize();
 //数组对象的初始化
 for(var i=0;i<circles.length;i++){
  arr=[];
  for(var j=0;j<6;j++){
   color[j] = st[Math.floor(Math.random()*16)];
  }
  arr.x = Math.floor(Math.random()*(maxW+1));//初始x坐标
  arr.y = Math.floor(Math.random()*(maxH+1));//初始y坐标
  arr.cx = arr.x + circles[0].offsetWidth/2; //圆心x坐标
  arr.cy = arr.y + circles[0].offsetHeight/2;//圆心y坐标
  arr.movex = Math.floor(Math.random()*2);//x轴移动方向
  arr.movey = Math.floor(Math.random()*2);//y轴移动方向
  arr.bgolor = '#'+ color.join('');//随机生成一个6位字符串
  arr.speed = 2+Math.floor(Math.random()*5);
  //随机生成一个2~6之间的移动速度(如果设置的改变速度太大,容易造成小球碰撞时两个小球之间有重合,也有可能小球会出界)
  arr.timer = null;//计时器
  arr.index = i;//索引值
  json.push(arr);
  circles[i].style.left = arr.x + 'px';//小球位置初始化
  circles[i].style.top = arr.y + 'px';//小球位置初始化
  circles[i].style.backgroundColor = arr.bgolor;//小球背景颜色初始化
 }
 //碰撞函数
 function crash(a){
  var ball1x = json[a].cx;
  var ball1y = json[a].cy;
  for(var i= 0;i<json.length;i++){
   if(i!=a){
    var ball2x = json[i].cx;
    var ball2y = json[i].cy;
    //圆心距离的平方
    var len = (ball1x-ball2x)*(ball1x-ball2x)+(ball1y-ball2y)*(ball1y-ball2y);
    if(len <= cwidth*cwidth){
    //小球位置的判断,发生碰撞反应
     if(ball1x >ball2x){
      if(ball1y > ball2y){
       json[a].movex=1;
       json[a].movey=1;
      }else if(ball1y < ball2y){
       json[a].movex=1;
       json[a].movey=0;
      }else{
       json[a].movex=1;
      }
     }else if(ball1x < ball2x){
      if(ball1y > ball2y){
       json[a].movex=0;
       json[a].movey=0;
      }else if(ball1y < ball2y){
       json[a].movex=0;
       json[a].movey=1;
      }else{
       json[a].movex=0;
      }
     }else{
      if(ball1y > ball2y){
       json[a].movey=1;
      }else if(ball1y < ball2y){
       json[a].movey=0;
      }
     }
    }
   }

  }
 }
 //移动函数
 function move(circle){
  circle.timer = setInterval(function () {
   if(circle.movex == 1){
    circle.x+=circle.speed;
    if(circle.x+circle.speed >= maxW){//防止小球出界
     circle.x = maxW;
     circle.movex=0;//小球运动方向发生改变
    }
   }else{
    circle.x-=circle.speed;
    if(circle.x-circle.speed <= 0){
     circle.x = 0;
     circle.movex=1;
    }
   }
   if(circle.movey == 1){
    circle.y += circle.speed;
    if(circle.y+circle.speed >= maxH){
     circle.y = maxH;
     circle.movey=0;
    }
   }else{
    circle.y-=circle.speed;
    if(circle.y-circle.speed <= 0){
     circle.y = 0;
     circle.movey=1;
    }
   }
   circle.cx = circle.x + circles[0].offsetWidth/2;//小球每一次运动圆心都会发生改变
   circle.cy = circle.y + circles[0].offsetHeight/2;
   circles[circle.index].style.left = circle.x + 'px';//小球位置重定位
   circles[circle.index].style.top = circle.y + 'px';
   /*console.log('x'+circle.cx+'y'+circle.cy);*/
   crash(circle.index);
  },16);
 }
 //对每一个小球绑定计时器,让小球动起来
 for(var i=0;i<circles.length;i++){
  move(json[i]);
 }
</script>
</body>

效果图:

原生js实现移动小球(碰撞检测)

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

Javascript 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
Taro小程序自定义顶部导航栏功能的实现
Dec 17 #Javascript
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
js回到页面指定位置的三种方式
Dec 17 #Javascript
javascript 数组(list)添加/删除的实现
Dec 17 #Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python将多份excel表格整理成一份表格
2018/01/03 Python
python函数的万能参数传参详解
2019/07/26 Python
Python之字典添加元素的几种方法
2020/09/30 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
什么是设计模式
2012/06/17 面试题
即兴演讲稿
2014/01/04 职场文书
学校安全检查制度
2014/01/27 职场文书
班风学风建设方案
2014/05/06 职场文书
公司周年庆典致辞
2015/07/30 职场文书
初中语文教学反思范文
2016/03/03 职场文书
小学毕业教师寄语
2019/06/21 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python