canvas小球碰撞運動

問題描述

網(wǎng)上找了一段canvas小球碰撞運動的代碼，代碼很棒，但是有個問題就是當兩個小球一開始就是交叉的時候，它們的運動軌跡是一樣的，按理說運動軌跡是隨機的，不知道為什么會出現(xiàn)一起跑的情況？

相關(guān)代碼

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; n++) {
    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) : '#') +
        s[m.floor(m.random() * 16)]
    })(Math, '0123456789abcdef', 5)
  }

  draw();

  function draw() {
    cxt.fillStyle = "#000";
    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; j++)
        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)))
  }
}

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

按理說運動軌跡是隨機的，互不影響的。

回答

編輯回答

寫榮

可以根據(jù)源碼看出來

其中有一個循環(huán)，遍歷了所有的小球，在循環(huán)的開始處，根據(jù)小球的速度，來為他進行一段偏移。

根據(jù)如下截圖，其作用是，在每一個循環(huán)里，對這個小球和其他所有小球做一個碰撞校驗，如果兩個小球發(fā)生重疊，則交換這兩個小球的速度（可以看出來這個程序?qū)崿F(xiàn)的不是彈性碰撞，而是簡單的交換速度）。

但是呢，這個循環(huán)是對所有小球發(fā)生的，也就是說，如果兩個小球不重疊，那么沒關(guān)系，其中先遍歷到的小球會把兩一個小球向相反的方向修改速度，然后下一個小球被循環(huán)到的時候，兩個小球就會遠離，由于速度是一樣的，因此會修正到碰撞前的距離，不會第二次觸發(fā)這個修改。

但是，如果兩個小球一開始就有大量重疊，那么第一次修改完以后，遍歷到第二個小球時，其速度依然不足以使其離開第一個小球，于是又觸發(fā)了第二次速度交換。然后他們倆又回到了之前的速度（相當于碰撞檢測失效了）