所謂包圍盒子是一個矩形，通常正好包圍住一個規則或不規則的圖形。如果兩個圖形的包圍盒沒有發生碰撞，那這兩個圖形一定不會發生碰撞，因為矩形的碰撞算法很簡單，所以能夠很好地優化性能。
大家好，我是前端西瓜哥。今天來講講幾何算法中，比較經典的算法：矩形碰撞和包含檢測算法。
矩形碰撞檢測是被廣泛使用的算法。
比如在游戲中，為了優化圖形碰撞判斷效率（復雜不規則圖形之間的碰撞算法很復雜），經常會使用到包圍盒。
所謂包圍盒子是一個矩形，通常正好包圍住一個規則或不規則的圖形。如果兩個圖形的包圍盒沒有發生碰撞，那這兩個圖形一定不會發生碰撞，因為矩形的碰撞算法很簡單，所以能夠很好地優化性能。
算法實現
考慮到有些讀者對原理不感興趣，想趕緊找到算法復制粘貼，很急，我這里先直接貼上代碼實現。
判斷矩形是否碰撞：
function isRectIntersect(rect1, rect2) {
return (
rect1.x <= rect2.x + rect2.width &&
rect1.x + rect1.width >= rect2.x &&
rect1.y <= rect2.y + rect2.height &&
rect1.y + rect1.height >= rect2.y
);
}判斷矩形 1 是否包含矩形 2：
function isRectContain(rect1, rect2) {
return (
rect1.x <= rect2.x &&
rect1.x + rect1.width >= rect2.x + rect2.width &&
rect1.y <= rect2.y &&
rect1.y + rect1.height >= rect2.y + rect2.height
);
}矩形碰撞檢測原理
首先明確矩形的定義。我們用 4 個屬性來描述一個矩形，分別為 x、y、width、height，表示矩形的左上角位置和尺寸。
這里用主流的坐標系統表示，以屏幕左上角為原點，x軸正方向向右，y 軸正方形向下。
或者我們可以用 minX、minY、maxX，minY 來表示：
矩形碰撞，也叫矩形相交。矩形發生碰撞的條件是：兩個矩形有重疊的區域。
下圖是兩個矩形碰撞的一些情況：
先看 x 維度，將兩個矩形往 x 軸線上投影，我們得到兩條線段。
矩形要相交，首先 x 的范圍上就應該有交集，等價于判斷兩個線段是否有交點。
先看看什么情況下它們 不會相交？答案是：一條線段的右端點在另一條線的的左端點的左側。
所以相交的邏輯是：
!(rect1.x > rect2.x + rect2.width || rect1.x + rect1.width < rect2.x)
轉換一下，就是：
rect1.x <= rect2.x + rect2.width &&
rect1.x + rect1.width >= rect2.x
y 維度同理，為：
rect1.y <= rect2.y + rect2.height &&
rect1.y + rect1.height >= rect2.y
所以最終算法實現為：
function isRectIntersect(rect1: IRect, rect2: IRect) {
return (
rect1.x <= rect2.x + rect2.width && // minX1 <maxX
rect1.x + rect1.width >= rect2.x &&
rect1.y <= rect2.y + rect2.height &&
rect1.y + rect1.height >= rect2.y
);
}矩形包含原理
思路類似矩形碰撞。
也是判斷兩條線段的位置關系，rect 1 包含 rect 2，首先在 x 維度上需要滿足 rect 2 的兩個點都在 rect 1 的 x 范圍內。
代碼為：
rect1.x <= rect2.x &&
rect1.x + rect1.width >= rect2.x + rect2.width
y 同理，最終代碼實現為：
function isRectContain(rect1, rect2) {
return (
rect1.x <= rect2.x &&
rect1.x + rect1.width >= rect2.x + rect2.width &&
rect1.y <= rect2.y &&
rect1.y + rect1.height >= rect2.y + rect2.height
);
}結尾
矩形算法的碰撞和包含算法，思路是降低維度，分解為判斷線段的相交關系。
