【发布时间】：2019-06-30 18:13:24
【问题描述】：
我在 javascript 中的画布上有多个省略号，我希望所有省略号相互反弹。我尝试使用距离公式，然后在距离小于球半径 *2 时改变球的 x 和 y 方向。
这对于一个球来说效果很好，但对于很多球来说效果并不好，因为它经常会导致描述为Here 的可怕“弹跳循环”
为了解决这个问题，我决定根据球相互碰撞的位置来改变球的弹跳方式，以避免弹跳循环并使游戏更接近现实生活中的物理学。
如果有侧面碰撞，我想反转两个球的 x 方向，如果有从上到下的碰撞，我想反转两个球的 y 方向。
因此，我计算了所有与度数相关的点，例如 45 度和 135 度之间的点（即 90 点），并将它们与 225 度和 315 度之间的所有 90 点进行比较，反之亦然。
如果圆边缘上的任何点与所有其他球中心点之间的距离小于半径，我希望两个球的 Y 方向反转。
我对 135 度和 225 度重复相同的过程到 315 度和 405 度（相当于 45 度）并反转两个球的 X 方向。
截至目前，我认为这些球应该按照我希望的方式相互反弹，但事实并非如此。它们从彼此的侧面和顶部、底部反弹，偶尔会以一定角度反弹，但它们往往会在彼此内部倾斜，然后改变方向。这是video of the output.
下面是上下对比的代码：
// radius is the same for all the balls and is at 25.
let ballToBallDistance = (x1, y1, x2, y2) => {
return Math.sqrt((Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
}
const ballCollisionY = (start, end) => {
for (let i = start; i <= end; i++) {
return ballObjects[0].ballRadius * Math.sin((i * Math.PI / 180));
}
}
const ballCollisionX = (start, end) => {
for (let i = start; i <= end; i++) {
return ballObjects[0].ballRadius * Math.cos((i * Math.PI / 180));
}
}
const upperYBall = {
bounceTopBottom() {
let n = 0;
for (let i = 0; i < ballObjects.length; i++) {
if (ballObjects.length == 1) {
return;
}
if (n == i) {
continue;
}
let yUpXPoint = ballObjects[n].ballXPos - ballCollisionX(45, 135);
let yUpYPoint = ballObjects[n].ballYPos - ballCollisionY(45, 135);
let centerBallX = ballObjects[i].ballXPos;
let centerBallY = ballObjects[i].ballYPos;
let pointDistance = ballToBallDistance(yUpXPoint, yUpYPoint, centerBallX, centerBallY);
if (pointDistance <= 25) {
ballObjects[n].ballMotionY = ballObjects[n].ballMotionY * -1;
}
if (i == ballObjects.length - 1) {
++n;
i = -1;
continue;
}
}
}
}
const lowerYBall = {
bounceBottomTop() {
let n = 0;
for (let i = 0; i < ballObjects.length; i++) {
if (ballObjects.length == 1) {
return;
}
if (n == i) {
continue;
}
let yDownXPoint = ballObjects[n].ballXPos - ballCollisionX(225, 315);
let yDownYPoint = ballObjects[n].ballYPos - ballCollisionY(225, 315);
let centerBallX = ballObjects[i].ballXPos;
let centerBallY = ballObjects[i].ballYPos;
let pointDistance = ballToBallDistance(yDownXPoint, yDownYPoint, centerBallX, centerBallY);
if (pointDistance <= 25) {
ballObjects[n].ballMotionY = ballObjects[n].ballMotionY * -1;
}
if (i == ballObjects.length - 1) {
++n;
i = -1;
continue;
}
}
}
}
我已经在这个功能上停留了两个星期。如果有人对我做错了什么有任何见解，也许有一个解决方案来达到预期的结果，那将不胜感激。
【问题讨论】：
标签： javascript arrays object for-loop continue