ボールが消えてしまうのはなぜですか?[閉まっている]


202

面白いタイトルを許してください。私は壁とお互いに対して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);
}

119
これは、今年の最高の質問タイトルだけでも、私の投票を獲得します!!
Alex

回答:


97

あなたのエラーは最初この行から来ます:

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

あなたはball1.velocitY(のundefined代わりに)持っていball1.velocityYます。だから、Math.atan2あなたを与えているNaN、そしてそのNaN値は、すべての計算を介して伝播されます。

これはエラーの原因ではありませんが、次の4行で変更したい場合があります。

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;

20

collideBalls関数にエラーがあります:

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

そのはず:

var direction1 = Math.atan2(ball1.velocityY, ball1.velocityX);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.