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

碰撞檢測，故名思議，兩個元素在運動的過程當中是否有接觸。
接下來，咱們從簡單到複雜的碰撞一一解析其中的算法。編碼使用JavaScript。
ps:下列圖形均指實心圖形

點與點的碰撞

這個太簡單了，很少說，就是當座標一致的時候就是碰撞.

//A（x1,y1）B(x2,y2) 
if(x1===x2 && y1===y2){
    //碰撞
}else{
    //無碰撞
}

點與圓的碰撞

點A(x1,y1) 圓心(x2,y2) 半徑 r

咱們能夠看出紅色的點與圓心的距離若小於半徑，那麼點與圓便發生碰撞。
根據勾股定理能夠得出距離 d = √((x1-x2)^2 + (y1-y2)^2)

//點A(x1,y1) 圓心(x2,y2) 半徑 r
if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= r){
    //碰撞
}else{
    //無碰撞
}

圓與圓的碰撞

圓A(x1,y1) 半徑r1 ; 圓B(x2,y2) 半徑 r2

一樣根據勾股定理能夠得出距離 d = √((x1-x2)^2 + (y1-y2)^2)

if(Math.sqrt(Math.pow(x1 - x2,2) + Math.pow(y1-y2,2)) <= (r1 + r2)){
    //碰撞
}else{
    //無碰撞
}

點與矩形的碰撞

首先矩形的表達方式有：

1. 已知四個角的一個頂點(x2,y2)與寬w高h

2. 已知幾何中心點(x2,y2)與寬w高h

3. 左上角與右下角兩個頂點(x2,y2)、(x3,y3)

//1. 已知四個角的一個頂點(x2,y2)與寬w高h，以左上角爲例
if(x1>=x2 && x1<=(x2+w) || (y1>=y2 && y1<=(y2+h))){
    //碰撞
}else{
    //無碰撞
}

//2. 已知幾何中心點(x2,y2)與寬w高h
if(x1 >= (x2-w/2) && x1 <= (x2+w/2) || (y1 >= (y2-h/2) && y1 <= (y2 + h/2))){
    //碰撞
}else{
    //無碰撞
}

//3. 左上角與右下角兩個頂點(x2,y2)、(x3,y3)
if(x1 >= x2 && x1 <= x3 || (y1 >= y2 && y1 <= y3)){
    //碰撞
}else{
    //無碰撞
}

矩形與矩形的碰撞

不管矩形是由什麼數據表示。咱們均可以求出幾何中心A點與B點的座標,與矩形寬w1 w2;高h1 h2。
假設求出A(x1,y1) B(x2,y2)

if(Math.abs(x2-x1) <= (w1+w2)/2 && Math.abs(y2-y1) <= (h1+h2)){
    //碰撞
}else{
    //無碰撞
}

下篇繼續講解當圓與矩形碰撞，等更復雜的碰撞檢測