web-dev-qa-db-fra.com

Pourquoi mes boules disparaissent-elles?

Pardonnez le titre drôle. J'ai créé une petite démo graphique de 200 balles rebondissant et entrant en collision, à la fois contre les murs et entre elles. Vous pouvez voir ce que j'ai actuellement ici: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

Le problème est que chaque fois qu'ils entrent en collision, ils disparaissent. Je ne sais pas pourquoi. Quelqu'un peut-il jeter un œil et m'aider?

MISE À JOUR: Apparemment, le tableau de boules a des boules avec les coordonnées de NaN. Ci-dessous, le code où je pousse les boules dans le tableau. Je ne sais pas exactement comment les coordonnées obtiennent 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);
}
javascriptcanvasgeometryphysicscollision
203
Yang Pulse

Votre erreur provient initialement de cette ligne:

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

Vous avez ball1.velocitY (qui est undefined) au lieu de ball1.velocityY. Donc Math.atan2 vous donne NaN, et cette valeur NaN se propage dans tous vos calculs.

Ce n'est pas la source de votre erreur, mais il y a autre chose que vous voudrez peut-être changer sur ces quatre lignes:

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

Vous n'avez pas besoin des affectations supplémentaires et pouvez simplement utiliser le += opérateur seul:

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

Il y a une erreur dans la fonction collideBalls:

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

Ça devrait être:

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