二維平面內的碰撞檢測【二】

這篇咱們將講解圓與矩形的碰撞；

圓與矩形的碰撞檢測

一般在svg或者canvas中咱們會這樣表示一個圓: 圓心(cx,cy)，半徑r;

表示矩形：中心點座標（0,0） width="250" height="250" x=-width/2 y=-height/2 平移（rectX,rectY）並以幾何中心旋轉任意角度

展現的矩形即幾何中心點（rectX,rectY）width="250" height="250"；

你可能會問，若是矩形被旋轉了怎麼辦？
咱們能夠在矩形的中心點創建一個新的座標系統。以寬平行方向爲x軸方向，以高平行方向爲Y軸方向

獲得在新的座標系統中圓的座標：(cx-rectX,cy-rectY)

在新座標系統中計算圓中心點的投影即圓中心點的座標。那麼咱們發現，

圖中L=r/Math.sqrt(r);

咱們能夠看到當兩邊投影 x 方向 小於等於width+L && y方向小於等於heigth/2 或者 x方向小於等於width/2 && y方向上小於等於 height+L的時候即碰撞

//(cx,cy) 矩形 width height 中心點(rectX,rectY)
var L=r/Math.sqrt(r);
if((Math.abs(cx-rectX)<= width/2+L && Math.abs(cy-rectY)<= height/2)||(Math.abs(cx-rectX)<= width/2 && Math.abs(cy-rectY)<= height/2+L)){
//碰撞
}else{
//無碰撞
}