我的蛋蛋怎么不见了?

请原谅这个有趣的标题。我创建了一个小的图形演示,200个球在墙上和彼此之间弹跳和碰撞。你可以看到我目前在这里:http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

问题是,只要它们相互碰撞,它们就会消失。我不知道为什么。有人能帮我看一下吗?

更新:显然球数组有球与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);
}
6788 次浏览

你的错误最初来自这一行:

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

你有ball1.velocitY(它是undefined)而不是ball1.velocityY。所以Math.atan2会给你NaN,而这个NaN值会在你的所有计算中传播。

这不是错误的来源,但在这四行中还有一些您可能想要更改的内容:

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;

collideBalls函数中有一个错误:

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

它应该是:

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