原生js 10个小球碰撞特效

感觉这个作者写得挺牛逼的，一点注释没有，还是挺难看懂的。下面是源码
<!doctype html>
<html>

  <head>
    <title>10个小球碰撞 js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        text-align: center;
      }
      
      #screen {
        width: 800px;
        height: 640px;
        position: relative;
        background: #ccccff;
        margin: 0 auto;
        vertical-align: bottom
      }
      
      #inner {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
      }
      
      #screen p {
        color: white;
        font: bold 14px;
      }
      #inner div{
        border-radius: 50%;
      }
      .one {
        background: #FFF228;
        background-size: 100% auto;
      }
      
      .two {
        background: #00008B;
        background-size: auto 100%;
      }
      
      .three {
        background: #008000;
        background-size: auto 100%;
      }
      
      .four {
        background: #212121;
        background-size: auto 100%;
      }
      
      .five {
        background: #A4E9C1;
        background-size: auto 100%;
      }
      
      .six {
        background: #C12E2A;
        background-size: auto 100%;
      }
      
      .seven {
        background: #B4D100;
        background-size: auto 100%;
      }
      
      .eight {
        background: #577EB2;
        background-size: auto 100%;
      }
      
      .nine {
        background: #A94442;
        background-size: auto 100%;
      }
      
      .ten {
        background: #ADADAD;
        background-size: auto 100%;
      }
    </style>
  </head>

  <body>
    <div id="screen">
      <p>hi test it!</p>
      <div id="inner">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="seven"></div>
        <div class="eight"></div>
        <div class="nine"></div>
        <div class="ten"></div>
      </div>
    </div>
    <input type="button" id="start" value="start">
    <input type="button" id="stop" value="stop">
    <br><br><br>
    <script type="text/javascript">
      var getFlag = function(id) {
        return document.getElementById(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("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)
        self.container = getFlag(cid);
        self.ballsnum = config.ballsnum;
        self.diameter = 80;
        self.radius = self.diameter / 2;
        self.spring = config.spring;
        self.bounce = config.bounce;
        self.gravity = config.gravity;
        self.balls = [];
        self.timer = null;
        self.L_bound = 0;
        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 < num; i++) {
            var ball = new Ball(self.diameter, clss[i]);
            ball.diameter = self.diameter;
            ball.radius = self.radius;
            ball.style.left = (Math.random() * self.R_bound) + 'px';
            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;
            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;
              dy = ball2.y - ball1.y;
              var dist = Math.sqrt(dx * dx + dy * dy);
              var misDist = ball1.radius + ball2.radius;
              if(dist < misDist) {
                var angle = Math.atan2(dy, dx);
                tx = ball1.x + Math.cos(angle) * misDist;
                ty = ball1.y + Math.sin(angle) * misDist;
                ax = (tx - ball2.x) * self.spring;
                ay = (ty - ball2.y) * self.spring;
                ball1.vx -= ax;
                ball1.vy -= ay;
                ball2.vx += ax;
                ball2.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';
          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;
        document.getElementById("inner").innerHTML = '';
        sc = new Screen('inner', {
          ballsnum: 10,
          spring: 0.3,
          bounce: -0.9,
          gravity: 0.01
        });
        sc.initialize();
        getFlag('start').onclick = function() {
          document.getElementById("inner").innerHTML = '';
          sc = new Screen('inner', {
            ballsnum: 10,
            spring: 0.3,
            bounce: -0.9,
            gravity: 0.01
          });
          sc.initialize();
        }
        getFlag('stop').onclick = function() {
          clearInterval(sc.timer);
        }
      }
    </script>
  </body>

</html>
模拟碰撞

"Hello World, Hello Blog"

原生js 10个小球碰撞特效

CATALOG

FEATURED TAGS

FRIENDS
