前  言

MYBG

　小编最近在做自己的个人网站，其中就用到了一个小球碰撞检测的功能，想自己写，无奈本人能力不足啊（毕竟还是一个菜鸟）！！就想着找个插件用一下也好，可是找了好久也没有找到一个比较好用的。好在天无绝人之路，在不断的搜搜巡巡过程中，还是发现了一个，用原生js实现小球碰撞检测的方法，下面分享给大家。

注：本文参考“敲代码不爱找bug的妹子”的一篇博客，详解可参考：http://blog.csdn.net/new_codeer/article/details/52386566

　　参考过后，经过对原文进行了稍微的改动，特别适用于网站的开发。复制过去，稍微改动一下即可。具体的原代码如下：

一、HTML代码（body部分） 
  1.  <body>
  2.      <!--只需要做一个大div包裹几个小div即可，你想要几个小球碰撞就在内部做几个div即可，这里我们做了6个小球-->
  3.      <div id="main">
  4.          <div></div>
  5.          <div></div>
  6.          <div></div>
  7.          <div></div>
  8.          <div></div>
  9.          <div></div>
  10.      </div>
  11.  </body>

　　上面body部分这样就算是完成了，下面我们给body中的div做一些小样式。

二、CSS小球样式部分 
  1.  <style type="text/css">
  2.      /*将body默认的margin和padding部分去掉*/
  3.      *{
  4.          margin: 0px;
  5.          padding: 0px;
  6.       }
  7.       /*采用定位的方式，让小球运动起来*/
  8.       #main{
  9.           margin: 0px auto;
  10.           position: relative;
  11.       }
  12.       /*小球的样式*/
  13.       #main div{
  14.           overflow: hidden;
  15.           position: absolute;
  16.           width: 80px;
  17.           height: 80px;
  18.           opacity: 0.5;
  19.           border-radius: 50%;
  20.           background-color: red;
  21.       }
  22.  </style>

　　小球是要运动起来的，我们通过给小球和它的父元素添加定位，最后用js改变其top、bottom、left、right值来让小球运动。现在我们小球的样式已经做好了，下面的js代码才是重中之重。

3.1 Android 事件基础知识 
  1.  <script type="text/javascript">
  2.          var main = document.getElementById("main"); //取到小球父元素
  3.          var circles = main.getElementsByTagName("div"); //取到小球
  4.          var st = [0,1,2,3,4,5,6,7,8,9];
  5.          var json = [],arr = [],color = [];
  6.          var maxW = 0;
  7.          var maxH = 0;
  8.          var cwidth = circles[0].offsetWidth; //对象可见宽度
  9.          var cheight = circles[0].offsetHeight; //对象可见高度
  10.  
  11.          //根据浏览器窗口的大小自动调节小球的运动空间
  12.          window.onresize=function(){
  13.              maxW=window.innerWidth-circles[0].clientWidth;//小球运动的最大宽度
  14.              maxH=window.innerHeight-circles[0].clientHeight;//小球运动的最大高度
  15.                  main.style.width = window.innerWidth+"px";
  16.              main.style.height = window.innerHeight+"px";
  17.          }
  18.          onresize();
  19.          //数组对象的初始化
  20.          for(var i=0;i<circles.length;i++){
  21.              arr=[];
  22.              for(var j=0;j<6;j++){
  23.                  color[j] = st[Math.floor(Math.random()*16)];
  24.              }
  25.          arr.x = Math.floor(Math.random()*(maxW+1));//初始x坐标
  26.          arr.y = Math.floor(Math.random()*(maxH+1));//初始y坐标
  27.          arr.cx = arr.x + circles[0].offsetWidth/2; //圆心x坐标
  28.          arr.cy = arr.y + circles[0].offsetHeight/2; //圆心y坐标
  29.          arr.movex = Math.floor(Math.random()*2);//x轴移动方向
  30.          arr.movey = Math.floor(Math.random()*2);//y轴移动方向
  31.          arr.speed = 2+Math.floor(Math.random()*5);//随机生成2-6之间的移动速度，如果在做项目的时候，这种随即生成的速度不想用的话，可以直接给speed赋值，
    固定小球的速度即可。如以下代码：
  32.          //arr.speed = 1.5;
  33.          arr.timer = null;//计时器
  34.          arr.index = i;//索引值
  35.          json.push(arr);
  36.          circles[i].style.left = arr.x + "px";//小球位置初始化
  37.          circles[i].style.top = arr.y + "px";//小球位置初始化
  38.          }
  39.          //碰撞函数
  40.          function crash(a){
  41.              var ball1x = json[a].cx;
  42.              var ball1y = json[a].cy;
  43.              for(var i= 0;i<json.length;i++){
  44.                  if(i!=a){
  45.                      var ball2x = json[i].cx;
  46.                      var ball2y = json[i].cy;
  47.                      //圆心距离的平方
  48.                      var len = (ball1x-ball2x)*(ball1x-ball2x)+(ball1y-ball2y)*(ball1y-ball2y);
  49.                      if(len <= cwidth*cwidth){
  50.                          //小球位置的判断，发生碰撞反应
  51.                          if(ball1x >ball2x){
  52.                              if(ball1y > ball2y){
  53.                                  json[a].movex=1;
  54.                                  json[a].movey=1;
  55.                              }else if(ball1y < ball2y){
  56.                                  json[a].movex=1;
  57.                                  json[a].movey=0;
  58.                              }else{
  59.                                  json[a].movex=1;
  60.                              }
  61.                          }else if(ball1x < ball2x){
  62.                              if(ball1y > ball2y){
  63.                                  json[a].movex=0;
  64.                                  json[a].movey=0;
  65.                              }else if(ball1y < ball2y){
  66.                                  json[a].movex=0;
  67.                                  json[a].movey=1;
  68.                              }else{
  69.                                  json[a].movex=0;
  70.                              }
  71.                          }else{
  72.                              if(ball1y > ball2y){
  73.                                  json[a].movey=1;
  74.                              }else if(ball1y < ball2y){
  75.                                  json[a].movey=0;
  76.                              }
  77.                          }
  78.                      }
  79.                  }
  80.  
  81.              }
  82.          }
  83.          //移动函数
  84.          function move(circle){
  85.              circle.timer = setInterval(function () {
  86.                  if(circle.movex == 1){
  87.                      circle.x+=circle.speed;
  88.                      if(circle.x+circle.speed >= maxW){//防止小球出界
  89.                      circle.x = maxW;
  90.                      circle.movex=0;//小球运动方向发生改变
  91.                      }
  92.                  }else{
  93.                      circle.x-=circle.speed;
  94.                      if(circle.x-circle.speed <= 0){
  95.                          circle.x = 0;
  96.                          circle.movex=1;
  97.                      }
  98.                  }
  99.                  if(circle.movey == 1){
  100.                      circle.y += circle.speed;
  101.                      if(circle.y+circle.speed >= maxH){
  102.                          circle.y = maxH;
  103.                          circle.movey=0;
  104.                      }
  105.                  }else{
  106.                      circle.y-=circle.speed;
  107.                      if(circle.y-circle.speed <= 0){
  108.                          circle.y = 0;
  109.                          circle.movey=1;
  110.                      }
  111.                  }
  112.                  circle.cx = circle.x + circles[0].offsetWidth/2;//小球每一次运动圆心都会发生改变
  113.                  circle.cy = circle.y + circles[0].offsetHeight/2;
  114.                  circles[circle.index].style.left = circle.x + "px";//小球位置重定位
  115.                  circles[circle.index].style.top = circle.y + "px";
  116.                  crash(circle.index);
  117.              },15);
  118.          }
  119.          //对每一个小球绑定计时器，让小球动起来
  120.          for(var i=0;i<circles.length;i++){
  121.              move(json[i]);
  122.          }
  123.   </script>

　　其实，我们通过上面的代码就可以完全实现一个小球碰撞检测的功能了。但是仅仅是上面的代码，还是会存在一定的bug，就是当整个网站存在右侧滚动条时，当小球碰到屏幕右侧的时候，会出现一瞬的横向滚动条，这就是做网站比较忌讳的了，横向滚动条的出现太丑了。所以我们可以通过以下代码来解决。

  1.         //滚动条宽度计算函数
  2.          function getScrollbarWidth() {
  3.              var oP = document.createElement("p"),
  4.                  styles = {
  5.                      width: "100px",
  6.                      height: "100px",
  7.                      overflowY: "scroll"
  8.                  }, i, scrollbarWidth;
  9.              for (i in styles) oP.style[i] = styles[i];
  10.              document.body.appendChild(oP);
  11.              scrollbarWidth = oP.offsetWidth - oP.clientWidth;
  12.              oP.remove();
  13.              return scrollbarWidth;
  14.          }

　　以上是一个计算滚动条宽度的函数，此函数可以计算右侧滚动条的宽度，我们只需要在“根据浏览器窗口的大小自动调节小球的运动空间”上面，调用此函数

var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大运动宽度   maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;这样这个bug就修改好了。

编者按

　　这个是我在做项目时的亲身经历，觉得这个写得特别好用，就拿过来与大家分享一下。希望对大家有那么一点点儿帮助吧！！最后还要感谢一下“敲代码不爱找bug的妹子”帮我解决了一个大问题。。

js实现小球的弹性碰撞。的更多相关文章

  1. python开发_tkinter_小球完全弹性碰撞游戏

    python开发_tkinter_小球完全弹性碰撞游戏   完成这个小球的完全弹性碰撞游戏灵感来自于: 下面是我花了一周下班时间所编写的一个小球完全弹性碰撞游戏: 游戏初始化状态: 最下面的游标和修改 ...

  2. pygame系列_小球完全弹性碰撞游戏

    之前做了一个基于python的tkinter的小球完全碰撞游戏: 今天利用业余时间,写了一个功能要强大一些的小球完全碰撞游戏: 游戏名称: 小球完全弹性碰撞游戏规则: 1.游戏初始化的时候,有5个不同 ...

  3. pygame系列_小球完全弹性碰撞游戏_源码下载

    之前做了一个基于python的tkinter的小球完全碰撞游戏: python开发_tkinter_小球完全弹性碰撞游戏_源码下载 今天利用业余时间,写了一个功能要强大一些的小球完全碰撞游戏: 游戏名 ...

  4. python开发_tkinter_小球完全弹性碰撞游戏_源码下载

    完成这个小球的完全弹性碰撞游戏灵感来自于: 下面是我花了一周下班时间所编写的一个小球完全弹性碰撞游戏: 游戏初始化状态: 最下面的游标和修改小球的移动速度 ====================== ...

  5. 第七讲：HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  6. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. js五彩小球

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js中小球碰壁反弹

    一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...

  9. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

随机推荐

  1. 一.把传统服务做成dubbo分布式服务架构的步骤

    1.把传统服务按照一定原则(根据项目的业务逻辑和场景)拆分成多个服务(主要服务是服务提供者和服务消费者,服务提供者或服务消费者的公共部分也可以拆分成其他服务,如公共DAO.公共工具类.公共实体,公共w ...

  2. 嵌入式linux开发之工具------tftp

    我在嵌入式linux开发中用到tftp的地方主要有2个方面: 1.是在嵌入式目标板启动时,bootloader启动时通过uEnv文件,下载dtb文件和kernel文件: 2.是在嵌入式目标板启动后,通 ...

  3. 解决VMware下安装Ubuntu 16.04 不支持1920X1080分辨率的问题

    解决方法: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync fl ...

  4. 规划自己的生活，从使用GTD时间管理法开始

    前言 为了不再浪费时间,不在茫然度过每一天,我为自己应用了GTD时间管理法,之前并不知道这种方法,实际和我自己定制的也差不太多,下面说说这个方法.   一.GTD时间管理 时间管理法有很多,而GTD( ...

  5. 适配ios11与iphone x实践

    一.适配iOS11 问题1:项目中有原生与H5的交互,运行在iOS11时,直接漰溃在框架WebViewJavascriptBridge内部. 报错信息:Completion handler passe ...

  6. OC中成员属性 成员变量

    比如用property声明一个变量属性 然后我们会为它用懒加载的方式重写get方法 然后我们在使用这个变量的时候,都是用self.itemArray,为什么这样用比较好呢,这是因为self.是对属性的 ...

  7. C#对图片进行马赛克处理，可控制模糊程度

    using System.Drawing; using System.Drawing.Imaging; using System.Web.Mvc; namespace MVC2017_Sample.C ...

  8. 如何在Windows系统中配置Mysql群集（Mysql Cluster）

    MySQL群集技术在分布式系统中为MySQL数据提供了冗余特性,增强了安全性,使得单个MySQL服务器故障不会对系统产生巨大的负面效应,系统的稳定性得到保障. Mysql群集(Cluster)简介 M ...

  9. Sqlite常用sql语句

    sqlite常用sql语句 --返回UTC时间 select CURRENT_TIMESTAMP; --返回本地时间 select datetime(CURRENT_TIMESTAMP,'localt ...

  10. 使用HDFS客户端java api读取hadoop集群上的信息

    本文介绍使用hdfs java api的配置方法. 1.先解决依赖,pom <dependency> <groupId>org.apache.hadoop</groupI ...