基本画布碰撞不适用于循环

我遇到了一个我无法完全理解的碰撞问题。我的程序的目的是在一个1920x900的边界框中生成一个随机数目的圆圈(介于2和15之间),其速度是随机的。如果它们相互接触,它们应该朝着相反的方向飞行(我知道,这不是很好的物理,但稍后会发生)

为此,我有四个数组:两个用于圆的坐标(xcord[]和ycord[]),两个用于每个圆的动量(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;
                }   
            }
        }

然后圆圈就互相忽略了,我不知道为什么。这是我在这段代码中唯一一次使用double for循环,但我多次使用第一个for循环,它对其他每个函数都能正确处理。

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