Bouncing Particles

HTML

<body>
<script>
function createParticle(x,y) {
  return {
    elm: createParticleElement(),
    x: x || (document.body.offsetWidth - 5) / 2,
    y: y || (document.body.offsetHeight - 5) / 2,
    dx: Math.random() * 10 - 5,
    dy: Math.random() * 10 - 5
  }
}

function createParticleElement() {
  var elm = document.createElement('div');
    document.body.appendChild(elm);
  elm.className = 'particle';
  return elm; 
}

function update() {
  for (var i=0; i < particles.length; i++) {
    var particle = particles[i];
    if ((particle.x <= 0 && particle.dx < 0) || (particle.x + 20 >= document.body.offsetWidth && particle.dx > 0))
        particle.dx *= -1;
    if ((particle.y <= 0 && particle.dy < 0) || (particle.y + 20 >= document.body.offsetHeight && particle.dy > 0))
        particle.dy *= -1; // 0.6
    particle.x += particle.dx;
    particle.y += particle.dy;
    //particle.dy += 0.01; // simulate gravity
    //particle.dx *= 0.998;
    particle.elm.style.left = Math.floor(particle.x) + 'px';
    particle.elm.style.top = Math.floor(particle.y) + 'px';
    for (var j=0; j < particles.length; j++) {
        if ((particle.x <= particles[j].x + 17 && particle.x >= particles[j].x) && (particle.y <= particles[j].y + 17 && particle.y >= particles[j].y) && particles[j] != particle) {
    // particle.dx *= -1;
    // particle.dy *= -1;
    // particles[j].dx *= -1;
    // particles[j].dy *= -1;
        }
      }
    for (var j = i + 1; j < particles.length; j++) {
    var mcBall1 = particle;
                        var mcBall2 = particles[j];
                        
                        var nDistX = Math.abs (mcBall1.x - mcBall2.x);
                        var nDistY = Math.abs (mcBall1.y - mcBall2.y);
                        var nDistance = Math.sqrt ( nDistX * nDistX + nDistY * nDistY );
                        
                        if (nDistance < 25)
                        {
                            collision(mcBall1, mcBall2);
                        }
...

CSS

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
    overflow:hidden;
}

.particle {
  position: absolute;
    background:blue;
  border-radius: 100px;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate3D(0,0,0);
}