Warum verschwinden meine Eier? [geschlossen]

Verzeihen Sie den lustigen Titel. Ich habe eine kleine grafische Demo von 200 Bällen erstellt, die sowohl gegen die Wände als auch gegeneinander springen und kollidieren. Sie können sehen, was ich aktuell hier habe: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

Das Problem ist, dass sie immer dann verschwinden, wenn sie miteinander kollidieren. Ich bin mir nicht sicher warum. Kann mir jemand einen Blick darauf werfen und mir helfen?

UPDATE: Anscheinend hat das Balls-Array Bälle mit NaN-Koordinaten. Unten ist der Code, mit dem ich Bälle zum Array schiebe. Ich bin nicht ganz sicher, wie die Koordinaten NaN bekommen.

// 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);
}

Ihr Fehler kommt zunächst aus dieser Zeile:

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

Sie haben ball1.velocitY(was ist undefined) statt ball1.velocityY. So Math.atan2gibt Ihnen NaN, und dass NaNWert wird , sich durch alle Ihre Berechnungen.

Dies ist nicht die Ursache Ihres Fehlers, aber es gibt noch etwas, das Sie in diesen vier Zeilen ändern möchten:

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

Sie benötigen keine zusätzlichen Zuweisungen und können nur den +=Operator alleine verwenden:

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

Es gibt einen Fehler in der collideBallsFunktion:

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

Es sollte sein:

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