原生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 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
Javascript中With语句用法实例
May 14 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
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和ACCESS写聊天室(十)
2006/10/09 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
layui分页效果实现代码
2017/05/19 Javascript
原生js二级联动效果
2017/06/20 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
超实用的 30 段 Python 案例
2019/10/10 Python
详解Flask前后端分离项目案例
2020/07/24 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
应届生求职自荐信范文
2014/04/07 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
一份文言文检讨书
2014/09/13 职场文书
经营目标责任书
2015/05/08 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android