移动圆的碰撞检查

Question

我正在开发一款2d帆布游戏。我有一个玩家圈子和一些圈子（大小和位置随机）。我让随机圆圈随机移动x.y点。这意味着我必须半径。一个是从＆＃34; bubble＆＃34;的旋转点到中点的半径。另一个是泡沫本身的半径。

我需要的是playercircle和气泡之间的碰撞。我知道如何使用毕达哥拉斯定理创建圆圈与collisondetction，并且它的效果非常好。但是有一个问题：

现在，碰撞适用于随机x和y点+半径（来自旋转点），但不适用于气泡本身。

我尝试的是将旋转点的x和y +半径到泡泡的中点存储到变量中以在碰撞中使用它们。它工作得很好。如果我控制台.log这些x和y点他们给我从泡沫的中点改变x和y。

我现在的问题是，如果从播放器x和y中减去这些点我没有使用正确的碰撞。所以很明显我错过了一些事情，现在我已经走到了尽头。

我向你展示了一个小提琴，碰撞的功能在第170行，变量名为BubbleX和BubbleY。 .counter在neg周围制作动画。或者积极性：

http://jsfiddle.net/CLrPx/1/（如果发生碰撞，你需要使用控制台）

function collideBubbles(c1, c2) {


    // moving/rotation xPos and yPos
    var bubbleX = c2.xPos + Math.cos(c2.counter / 100) * c2.radius; // actual x and y pos. from bubble!
    var bubbleY = c2.yPos + Math.cos(c2.counter / 100) * c2.radius;


    //console.log('bubbleX:  ' + bubbleX);
    //console.log('bubbleY:  ' + bubbleY);


    var dx = c1.xPos - bubbleX; // change with pos from actual bubble!
    var dy = c1.yPos - bubbleY; // change with pos from actual bubble!
    var distance = c1.radius + c2.bubbleRadius


    // Pytagorean Theorem
    return (dx * dx + dy * dy <= distance * distance);
}