JavaScript implements 10 ball random motion, the collision example detailed _javascript skill

This paper illustrates the method of 10 random motion and collision of JavaScript. Share to everyone for your reference. Specifically as follows:

Learning JavaScript for a while, done a few cases, the most difficult is the 10 small ball random impact effect, this does not, put it up and share with you, I believe that many and I like the rookie in the beginning of programming will have a lot of confusion, I hope it can bring some people help.

Effect requirements: 10 small balls in the page randomly moving, touching the window boundary or other small ball will bounce

Ideas:

1, 10 balls are 10 div;
2, touch the window bounce, define VX VY as a moving variable of the ball, and an elastic variable bounce (negative), when the ball touches the window boundary, VX vy respectively multiplied by bounce, then changed the direction of the ball movement
3, small ball collision bounce, said simple point, when two small ball center distance variable Dist less than its minimum value (radius of the sum) will change the direction of the ball, to achieve rebound

OK, the code is as follows:

HTML and JS are separate files yo

test.html files are as follows:

The

Test.js file is as follows:

var getflag=function (id) {return document.getelementbyidx_x (ID);
   Gets the element reference} 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 ';p osition= ' absolute ';
return ball;
  The Var screen=function (cid,config) {//first creates the properties of the class Var self=this; if (!) ( Self instanceof screen) {return new screen (Cid,config)} config=extend (Screen.config, config)//configj is a extend class      Example of Self.container=getflag (CID);
  Window object Self.ballsnum=config.ballsnum;            self.diameter=56;
  The diameter of the ball is SELF.RADIUS=SELF.DIAMETER/2;       self.spring=config.spring;       The rebound force self.bounce=config.bounce after the ball collide;      The ball hits the window boundary after the rebound force self.gravity=config.gravity;             Gravitational self.balls=[of the ball]; Place the created ball in the array variable Self.tiMer=null; The time ID self generated by the calling function.            L_bound=0; Container the boundary self.
  R_bound=self.container.clientwidth; Self.
  T_bound=0; Self.
B_bound=self.container.clientheight;
};
screen.config={///To assign the initial value of the attribute 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 ()} ()}, Createballs:function () {var self=this, Num=self.ball
    Snum;  var frag=document.createdocumentfragment (); Create document fragmentation to avoid multiple refresh for (i=0;i<num;i++) {var ball=new ball (self.diameter,clss[Math.floor (math.random () * nu
      m)]);
      Ball.diameter=self.diameter;
      Ball.radius=self.radius; Ball.style.left= (Math.random () *self. R_bound) + ' px '; The initial position of the ball, ball.style.top= (Math.random () *self.
      B_bound) + ' px ';
      Ball.vx=math.random () * 6-3;
      Ball.vy=math.random () * 6-3;
      Frag.appendchild (ball); Self.balls[i]=ball;
  } self.container.appendChild (Frag);
    }, Hitballs:function () {var self=this, num=self.ballsnum,balls=self.balls;
      for (i=0;i<num-1;i++) {var ball1=self.balls[i];   Ball1.x=ball1.offsetleft+ball1.radius;
      Small ball Center coordinate ball1.y=ball1.offsettop+ball1.radius;
        for (j=i+1;j<num;j++) {var ball2=self.balls[j];
        Ball2.x=ball2.offsetleft+ball2.radius;
        Ball2.y=ball2.offsettop+ball2.radius;           dx=ball2.x-ball1.x;
        Two right-angled edge dy=ball2.y-ball1.y corresponding to the center distance of the two small balls;    var dist=math.sqrt (dx*dx + dy*dy);  The center distance is calculated from Var Misdist=ball1.radius+ball2.radius with two right angles; Center distance Minimum if (Dist < misdist) {//Assuming the ball will continue to do some movement in the original direction after the collision, define it as motion a var Angle=math.atan
         2 (DY,DX); 
            When it happens to be the dist=misdist, tx=ballb.x, ty=ballb.y tx=balla.x+math.cos (angle) * misdist;
         Ty=balla.y+math.sin (angle) * misdist;
     Generates motion A, TX > ballb.x, Ty > Ballb.y, so the value of motion A is recorded with Ax, ay       ax= (tx-ballb.x) * self.spring;
         ay= (TY-BALLB.Y) * self.spring;             
            One ball minus Ax, Ay, and the other adds it, then the rebound balla.vx-=ax;
            Balla.vy-=ay;
            Ballb.vx+=ax;
          Ballb.vy+=ay;
    }}} for (i=0;i<num;i++) {self.moveballs (balls[i]);
    }, Moveballs:function (ball) {var self=this;
    ball.vy+=self.gravity;
    Ball.style.left= (BALL.OFFSETLEFT+BALL.VX) + ' px ';
    Ball.style.top= (Ball.offsettop+ball.vy) + ' px '; To determine the ball and window boundary collision, the variable name to simplify the Var l=self. L_bound, R=self. R_bound, T=self. T_bound, B=self. 
    B_bound, Bc=self.bounce;
      if (Ball.offsetleft < L) {ball.style.left=l;
    BALL.VX*=BC;
      else if (Ball.offsetleft + ball.diameter > R) {ball.style.left= (r-ball.diameter) + ' px ';
    BALL.VX*=BC;
      else if (Ball.offsettop < T) {ball.style.top=t;
    BALL.VY*=BC; } if (Ball.offsettop + ball.diameter > 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);
 }
}

After testing the effect is very good, you may think that the code is very long, but the idea is quite clear:
The screen class is created first, and the various property variables required for the ball to move and collide are given in the screen's constructor, such as Ballsnum, Spring, bounce, gravity, and so on.
Then use the prototype prototype to give the corresponding functions, such as creating the ball, createballs, ball collision hitballs, ball movement moveballs, add the corresponding function to each function,
Finally, click on the event Call function with a button, that's all.

I hope this article will help you with your JavaScript programming.