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);
}
Antworten:
Ihr Fehler kommt zunächst aus dieser Zeile:
Sie haben
ball1.velocitY
(was istundefined
) stattball1.velocityY
. SoMath.atan2
gibt IhnenNaN
, und dassNaN
Wert 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:
Sie benötigen keine zusätzlichen Zuweisungen und können nur den
+=
Operator alleine verwenden:quelle
Es gibt einen Fehler in der
collideBalls
Funktion:Es sollte sein:
quelle