Warum verschwinden meine Eier?

Question

Verzeih den witzigen Titel. Ich habe eine kleine Grafik-Demo von 200 Kugeln erstellt, die hüpfen und kollidieren, sowohl an den Wänden als auch aneinander. Sie können sehen, was ich gerade hier habe: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

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

AKTUALISIERUNG: Anscheinend hat das Kugelarray Kugeln mit Koordinaten von NaN. Unten ist der Code, wo ich Bälle zum Array verschiebe. Ich bin mir 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); 
} 

Answer 1

Ihr Fehler kommt aus dieser Linie zunächst:

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

Sie haben ball1.velocitY (die undefined ist) anstelle von ball1.velocityY. Also Math.atan2 gibt Ihnen NaN, und das NaN Wert wird durch alle Ihre Berechnungen weitergegeben.

Dies ist nicht die Quelle der Fehler, aber es ist etwas anderes, das Sie auf 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 die zusätzlichen Aufgaben nicht brauchen, und die nur verwenden können += Betreiber allein:

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

Answer 2

Es ist ein Fehler in der collideBalls Funktion:

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

es sein sollte:

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