基本 canvas 碰撞在 for 循环中不起作用

Question

我遇到了一个我不太明白的碰撞问题。我的程序的重点是在 1920x900 的边界框中以随机速度生成随机数量的圆（2 到 15 之间）。如果它们相互接触，它们应该朝相反的方向飞走（我知道这不是很好的物理学，但稍后会出现。）

为此，我有四个数组：两个用于圆的坐标（xcords[] 和 ycords[]，两个用于每个圆的动量（xdirs[] 和 ydirs[]）。

这是我的碰撞函数

function collides(x, y)
    {
        if(Math.hypot(xcords[y]-xcords[x], ycords[y]-ycords[x]) < 50)
        {
            return true;
        }
        else return false;
    }

当我对某些值进行硬编码时，例如

if(collides(xcords[1],xcords[0])
{
     xdirs[0] *= -1;
     xdirs[1] *= -1;
     ydirs[0] *= -1;
     ydirs[1] *= -1;
}

然后它工作正常。我硬编码的两个圆圈将正确碰撞。但是当我尝试将其应用于每个圈子时：

for(i=0; i<circles; i++)
        {
            for(j=0; j<circles; j++)
            {
                if(collides(xcords[i], xcords[j]))
                {
                    xdirs[i] *= -1;
                    xdirs[j] *= -1;
                    ydirs[i] *= -1;
                    ydirs[j] *= -1;
                }   
            }
        }

然后圈子就互相忽略了，我不知道为什么。这是我唯一一次在此代码中使用双 for 循环，但我多次执行第一个 for 循环，并且它为所有其他函数正确处理它。

这是一个 jsfiddle。 https://jsfiddle.net/sekbr0pg/ 边界框有点偏离，但足以看出碰撞是不稳定的。

Answer 1

让我们以圆圈 1 和圆圈 2 为例。您想检查它们是否碰撞仅一次。以下循环对此有好处吗？

for(i=0; i<circles; i++) {
        for(j=0; j<circles; j++){
        // if collides ...
        }
}

答案是否定的，原因是他们会运行两次，i=1 and j=2 和 i=2 and j=1。所以基本上它不会改变任何东西，因为 -1*-1 = 1。在你的循环中改变 j=0 到 j=i+1.

您的 collides 函数也接受圈子，所以我认为 collides(i,j) 可以完成这项工作。

基本 canvas 碰撞在 for 循环中不起作用

Basic canvas collision not working in for loops

html

javascript

canvas

collision