原谅这个有趣的标题。我创建了一个 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); }
您的错误最初来自这一行:
var direction1 = Math.atan2(ball1.velocitY, ball1.velocityX);
你有ball1.velocitY(即undefined) 而不是ball1.velocityY. Math.atan2给你也是如此NaN,而这个NaN价值正在通过你的所有计算传播。
ball1.velocitY
undefined
ball1.velocityY
Math.atan2
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;