碰撞響應問題 - 矩形內的基本圓

Question

我有一個使用JS和Fabric.js的動畫，其中更多的圓圈在屏幕周圍。 我試圖將它們包含在特定區域但有一些問題。

在昨天閱讀完之后，我認為測試圈子是否在矩形內（他們的容器）會很簡單，但我還沒有讓它正常工作。

圓圈在屏幕底部創建，也就是容器所在的位置。 使用我所擁有的代碼，它們可以“漂浮”到頂部並保持在一個位置。

控制台記錄我已經指出它們立即在矩形之外，所以我假設我的碰撞功能有問題。

我的目標是讓他們留在容易移動的地方，當他們碰到邊緣時，他們應該改變方向，以便他們再次留在里面。

謝謝你的幫助。

編輯：編輯以啟用清晰度的接觸並使用以下答案進行COLSIOSN檢測，因為現在認為問題與檢測中的響應有關。

碰撞功能：

function testCollision（circle，rectangle）{

return circle.left + circle.radius < rectangle.left + rectangle.width/2 //right side
    && circle.left - circle.radius < rectangle.left - rectangle.width/2 //left side
    && circle.top + circle.radius < rectangle.top + rectangle.height/2 //top
    && circle.top - circle.radius < rectangle.top - rectangle.height/2;

}

left = x＆top = y

有maxX和maxY值，它們是容器的寬度和高度。
這是測試：

if(testCollision(circle, rect) == false){
        var r = Math.atan2(y - maxY / 2, x - maxX / 2);
        vx = -Math.cos(r);
        vy = -Math.sin(r);
    }

任何幫助都非常感謝，謝謝！

Answer 1

我看到它的方式，由中心和半徑的（x，y，r）坐標定義的圓是在由中心的（x，y，w，h）坐標定義的軸對齊矩形內，寬度和如果圓的頂部，右側，底部，左側的4個點位於矩形內，則高度為：

function testCollision(circle, rectangle) {
  return circle.x + circle.r < rectangle.x + rectangle.w/2
      && circle.x - circle.r > rectangle.x - rectangle.w/2
      && circle.y + circle.r < rectangle.y + rectangle.h/2
      && circle.y - circle.r > rectangle.y - rectangle.h/2
}

我認為y的正方向是朝向底部，就像在網絡上的坐標系統中一樣。