problem description

online found a section of canvas ball collision code, the code is great, but there is a problem is that when two small balls are crossed at the beginning, their trajectories are the same, supposed to be random, I don"t know why they run together?

related codes

window.onload = function () {
  var canvas = document.getElementById("ball");
  var cxt = canvas.getContext("2d");
  var r = 20;
  var maxNum = 5;
  var ballArray = new Array();
  var maxX = canvas.width;
  var maxY = canvas.height;
  for (var n = 0; n < maxNum; nPP) {
    var x = {
      x: getRandomNumber(r, maxX - r),
      y: getRandomNumber(r, maxY - r),
      r: r,
      vX: getRandomNumber(0.5, 1),
      vY: getRandomNumber(0.5, 1),
      color: getRandomColor(),
    }
    ballArray.push(x);
  }

  function getRandomColor() {
    return (function (m, s, c) {
      return (c ? arguments.callee(m, s, c - 1) : "-sharp") +
        s[m.floor(m.random() * 16)]
    })(Math, "0123456789abcdef", 5)
  }

  draw();

  function draw() {
    cxt.fillStyle = "-sharp000";
    cxt.fillRect(0, 0, canvas.width, canvas.height);
    for (i in ballArray) {
      var x = i;

      ballArray[i].x += ballArray[i].vX /2;
      ballArray[i].y += ballArray[i].vY/2;

      if (ballArray[i].x >= maxX - r) {
        ballArray[i].x = maxX - r;
        ballArray[i].vX = -ballArray[i].vX;
      }
      if (ballArray[i].x <= r) {
        ballArray[i].x = r;
        ballArray[i].vX = -ballArray[i].vX;
      }
      if (ballArray[i].y >= maxY - r) {
        ballArray[i].y = maxY - r;
        ballArray[i].vY = -ballArray[i].vY;
      }
      if (ballArray[i].y <= r) {
        ballArray[i].y = r;
        ballArray[i].vY = -ballArray[i].vY;
      }

      for (var j = 0; j < maxNum; jPP)
        if (j !== x) {
          if (Math.round(Math.pow(ballArray[x].x - ballArray[j].x, 2) +
              Math.pow(ballArray[x].y - ballArray[j].y, 2)) <=
            Math.round(Math.pow(r + r, 2))) {

            var tempX = ballArray[x].vX;
            var tempY = ballArray[x].vY;
            ballArray[x].vX = ballArray[j].vX;
            ballArray[j].vX = tempX;
            ballArray[x].vY = ballArray[j].vY;
            ballArray[j].vY = tempY;
          }
        }
      cxt.beginPath();

      cxt.fillStyle = ballArray[i].color;
      cxt.arc(ballArray[i].x, ballArray[i].y, ballArray[i].r, 0, Math.PI * 2, true);
      cxt.closePath();
      cxt.fill();
    }
    setTimeout(function () {
      draw();
    }, 10);
  }

  function getRandomNumber(min, max) {
    return (min + Math.floor(Math.random() * (max - min + 1)))
  }
}

what result do you expect? What is the error message actually seen?

the trajectories are supposed to be random and independent of each other.