왜 내 공이 사라지는가? [닫은]

재미있는 제목을 용서하십시오. 벽과 벽에 대해 200 개의 공이 튀거나 충돌하는 작은 그래픽 데모를 만들었습니다. 내가 현재 여기에있는 것을 볼 수 있습니다 : http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

문제는 그들이 서로 충돌 할 때마다 사라진다는 것입니다. 왜 그런지 잘 모르겠습니다. 누군가 살펴보고 나를 도울 수 있습니까?

업데이트 : 분명히 balls 배열에는 NaN 좌표가있는 볼이 있습니다. 아래는 볼을 배열로 푸시하는 코드입니다. 좌표가 NaN을 얻는 방법을 완전히 모르겠습니다.

// Variables
var numBalls = 200;  // number of balls
var maxSize = 15;
var minSize = 5;
var maxSpeed = maxSize + 5;
var balls = new Array();
var tempBall;
var tempX;
var tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempVelocityX;
var tempVelocityY;

// Find spots to place each ball so none start on top of each other
for (var i = 0; i < numBalls; i += 1) {
  tempRadius = 5;
  var placeOK = false;
  while (!placeOK) {
    tempX = tempRadius * 3 + (Math.floor(Math.random() * theCanvas.width) - tempRadius * 3);
    tempY = tempRadius * 3 + (Math.floor(Math.random() * theCanvas.height) - tempRadius * 3);
    tempSpeed = 4;
    tempAngle = Math.floor(Math.random() * 360);
    tempRadians = tempAngle * Math.PI/180;
    tempVelocityX = Math.cos(tempRadians) * tempSpeed;
    tempVelocityY = Math.sin(tempRadians) * tempSpeed;

    tempBall = {
      x: tempX, 
      y: tempY, 
      nextX: tempX, 
      nextY: tempY, 
      radius: tempRadius, 
      speed: tempSpeed,
      angle: tempAngle,
      velocityX: tempVelocityX,
      velocityY: tempVelocityY,
      mass: tempRadius
    };
    placeOK = canStartHere(tempBall);
  }
  balls.push(tempBall);
}

처음에는이 줄에서 오류가 발생합니다.

var direction1 = Math.atan2(ball1.velocitY, ball1.velocityX);

당신은 ball1.velocitY(어떤 undefined대신) ball1.velocityY. 그래서 Math.atan2당신에게을주고 NaN있으며 그 NaN가치는 모든 계산을 통해 전파됩니다.

이것은 오류의 원인이 아니지만 다음 네 줄에서 변경하려는 다른 것이 있습니다.

ball1.nextX = (ball1.nextX += ball1.velocityX);
ball1.nextY = (ball1.nextY += ball1.velocityY);
ball2.nextX = (ball2.nextX += ball2.velocityX);
ball2.nextY = (ball2.nextY += ball2.velocityY);

추가 할당이 필요하지 않으며 +=연산자 만 사용할 수 있습니다 .

ball1.nextX += ball1.velocityX;
ball1.nextY += ball1.velocityY;
ball2.nextX += ball2.velocityX;
ball2.nextY += ball2.velocityY;

collideBalls함수에 오류가 있습니다 :

var direction1 = Math.atan2(ball1.velocitY, ball1.velocityX);

그것은해야한다:

var direction1 = Math.atan2(ball1.velocityY, ball1.velocityX);