为什么我的球消失了？ [英] Why are my balls disappearing?

问题描述

赦免有趣的标题。我创造了一个200个球弹跳和碰撞的一个小的图形演示，无论是对墙壁和彼此。您可以查看我目前的位置： http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/ p>

问题是，每当它们相互碰撞时，它们就会消失。我不知道为什么。有人可以看看，帮助我吗？

更新：显然球阵列有坐标为NaN的球。下面是我把球推到阵列的代码。我不完全确定坐标是如何得到NaN。

  //变量
 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; 
 
 //找到要放置每个球的位置，使得每个球都不会彼此重叠
 for（var i = 0; i  tempRadius = 5; 
 var placeOK = false; 
 while（！placeOK）{
 tempX = tempRadius * 3 +（Math.random（）* theCanvas.width） -  tempRadius * 3）; 
 tempY = tempRadius * 3 +（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）; 
} 
  

解决方案

最初：

  var direction1 = Math.atan2（ball1.velocitY，ball1.velocityX）; 
  

您有 ball1.velocitY undefined ），而不是 ball1.velocityY 。因此 Math.atan2 给你 NaN ，并且 NaN 值正在传播所有的计算。

这不是你的错误的根源，但有一些你可能想改变这四行： / p>

  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; 
  

Pardon the funny title. I've created a little graphic demo of 200 balls bouncing and colliding, both against the walls and each other. You can see what I have currently here: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

The problem is that whenever they collide with each other, they disappear. I'm not sure why. Can someone take a look and help me out?

UPDATE: Apparently the balls array has balls with coordinates of NaN. Below is the code where I push balls to the array. I'm not entirely sure how the coordinates are getting 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);
}

解决方案

Your error comes from this line initially:

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

You have ball1.velocitY (which is undefined) instead of ball1.velocityY. So Math.atan2 is giving you NaN, and that NaN value is propagating through all your calculations.

This is not the source of your error, but there is something else that you might want to change on these four lines:

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

You don't need the extra assignments, and can just use the += operator alone:

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

这篇关于为什么我的球消失了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！