HTML5画布 - 如何反弹两个圆圈？

Question

我使用html5 canvas arc创建了一个完整的圆形对象数组（让它称之为球对象）

c.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false);

球只在帆布区域移动。如果它们到达边缘，它们将反弹（改变它们的方向速度和速度）。现在这很容易实现。我根据它移动的方向将半径加到或减去球中心（curent canvas X和Y位置）。

// controll ball velocity
function controlBallVelocityOnBoundHit(circle){
    if(circle.x + circle.vx + circle.r > container.x + container.w || circle.x - circle.r + circle.vx < container.x){
      circle.vx = -circle.vx;
      controlSlowingDownAndDirectionBallsAfterBounce(circle);
    }
    if(circle.y + circle.vy + circle.r > container.y + container.h || circle.y - circle.r + circle.vy < container.y){
      circle.vy = -circle.vy;
      controlSlowingDownAndDirectionBallsAfterBounce(circle);
    }    
}

但是现在我想让它们在它们周围的任何一点接触时互相反弹。

如何检查画布区域是否由两个球对象共享，或者一个球区域是否触及另一个球区域。

以下是CODEPEN上的示例项目。目前球正在一个接一个地移动，这不是我要做什么的结果。

问题： 示例：CODEPEN