2D旋轉矩形碰撞

Question

我想測試兩個矩形對象，其中一個被旋轉的對象在JavaScript中發生碰撞。

下面是我所關於的屏幕截圖。

經過網上調查的時間，我一直在想什麼（算法）如果激光上下的石灰對象與藍色方塊重疊檢測的最佳方式。

我會很感激任何建議。

Answer 1

對此可以使用分離軸定理。基本上，如果2個凸多邊形（例如矩形）不相交，那麼至少應該有一條線（由其中一個多邊形的邊緣延伸至無窮遠而形成），其中一個多邊形的所有角落都位於其一邊，而另一側的所有角落都位於另一側。

您可以使用點積來測試某一點所在的線條的哪一側。一個矢量應該是該線的法線，而另一個矢量應該是從該線上的點到您正在測試的點的矢量。

如果您指定您的矩形角頂點具有恆定的繞線順序（例如始終順時針或始終逆時針），那麼您將知道點產品應該是當其他矩形的點位於該線對應於矩形的外部。

僞代碼：

function hasSeparatingAxis(a, b) 
{ 
    // test each side of a in turn: 
    for(i = 0; i < a.side_count; i++) 
    { 
     normal_x = a.verts[(i+1)%a.side_count].y - a.verts[i].y; 
     normal_y = a.verts[i].x - a.verts[(i+1)%a.side_count].x; 

     for(j = 0; j < b.side_count; j++) 
     { 
      dot_product = ((b.vert[j].x - a.verts[i].x) * normal_x) + 
       ((b.vert[j].y - a.verts[i].y) * normal_y); 
      if(dot_product <= 0.0) // change sign of test based on winding order 
       break; 
      if(j == b.side_count-1) 
       return true; // all dots were +ve, we found a separating axis 
     } 
    } 
    return false; 
} 

function intersects(a, b) 
{ 
    return !hasSeparatingAxis(a, b) && !hasSeparatingAxis(b, a); 
}