javascript实现10个球随机运动、碰撞实例详解_javascript技巧

本文实例讲述了javascript实现10个球随机运动、碰撞的方法。分享给大家供大家参考。具体如下：

学了一段时间的javascript了，做过一些小案例，目前最有难度的就是10个小球随机碰撞效果，这不，把它上上来与大家分享一下，相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑，希望它能给一些人带来帮助。

效果要求：10个小球在页面随机移动，碰到窗口边界或其他小球都会反弹

思路：

1、10个小球是10个div;
2、碰窗口反弹，定义vx vy为小球的移动变量，以及一个弹力变量bounce(负值),小球碰窗口边界时，vx vy分别乘以bounce，则改变了小球移动方向
3、小球相碰反弹，说简单点，当两个小球的圆心距变量dist小于其最小值（半径之和）则改变球的移动方向，实现反弹

好了，代码如下：

html和js是分开的文件哟

test.html文件如下：

 
  

     
hi test it!
     
   
   

test.js文件如下：

var getFlag=function (id) {
     return document.getElementByIdx_x(id);  //获取元素引用
}
var extend=function(des, src) {
     for (p in src) {
       des[p]=src[p];
   }
  return des;
 }
var clss=['one','two','three','four','five','six','seven','eight','nine','ten'];
var Ball=function (diameter,classn) {
  var ball=document.createElement_x("div");
  ball.className=classn;
  with(ball.style) {
    width=height=diameter+'px';position='absolute';
  }
  return ball;
}
var Screen=function (cid,config) {
  //先创建类的属性
  var self=this;
  if (!(self instanceof Screen)) {
    return new Screen(cid,config)
  }
  config=extend(Screen.Config, config)  //configj是extend类的实例
  self.container=getFlag(cid);      //窗口对象
  self.ballsnum=config.ballsnum;
  self.diameter=56;            //球的直径
  self.radius=self.diameter/2;
  self.spring=config.spring;       //球相碰后的反弹力
  self.bounce=config.bounce;       //球碰到窗口边界后的反弹力
  self.gravity=config.gravity;      //球的重力
  self.balls=[];             //把创建的球置于该数组变量
  self.timer=null;            //调用函数产生的时间id
  self.L_bound=0;            //container的边界
  self.R_bound=self.container.clientWidth;
  self.T_bound=0;
  self.B_bound=self.container.clientHeight;
};
Screen.Config={             //为属性赋初值
  ballsnum:10,
  spring:0.8,
  bounce:-0.9,
  gravity:0.05
};
Screen.prototype={
  initialize:function () {
    var self=this;
    self.createBalls();
    self.timer=setInterval(function (){self.hitBalls()}, 30)
  },
  createBalls:function () {
    var self=this, num=self.ballsnum;
    var frag=document.createDocumentFragment();  //创建文档碎片，避免多次刷新    
     for (i=0;i ballb.x, ty > ballb.y,所以用ax、ay记录的是运动A的值
            ax=(tx-ballb.x) * self.spring; 
            ay=(ty-ballb.y) * self.spring;
         //一个球减去ax、ay，另一个加上它，则实现反弹
            balla.vx-=ax;             
            balla.vy-=ay;
            ballb.vx+=ax;
            ballb.vy+=ay;
          }
      }
    }
    for (i=0;i R) {
      ball.style.left=(R-ball.diameter)+'px';
      ball.vx*=BC;
    }
    else if (ball.offsetTop  B) {
      ball.style.top=(B-ball.diameter)+'px';
      ball.vy*=BC;
    }
  }
}
window.onload=function() {
  var sc=null;
  getFlag('start').onclick=function () {
    document.getElementByIdx_x("inner").innerHTML='';
    sc=new Screen('inner',{ballsnum:10, spring:0.8, bounce:-0.9, gravity:0.05});
    sc.initialize();
  }
  getFlag('stop').onclick=function() {
    clearInterval(sc.timer);
  }
}

测试后的效果还是很不错的，各位也许会觉得代码挺长，但是其思路还是蛮清晰的：
首先创建Screen类，并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量，如ballsnum、spring、bounce、gravity等等
然后用原型prototype给出相应的函数，如创建球，createBalls，球碰撞hitBalls，球移动moveBalls，给每个函数添加相应的功能、
最后用按钮点击事件调用函数，仅此而已。

希望本文所述对大家的javascript程序设计有所帮助。