碰撞檢測

碰撞檢測

剛纔回答了一個H5遊戲的問答。心血來潮，就想寫寫碰撞檢測，廢話很少說，直接懟。

矩形和矩形的碰撞檢測

現有rect1 = {x:0,y:0,w:5,h:5};rect2 = {x:10,y:10,w:5,h:5};。
矩形咱們通常擁有的都是左上角點的XY以及他的寬高WH。碰撞固然就是我中有你，你中有我咯，那麼就是判斷四條邊，在我左邊的右邊，右邊的左邊，上邊的下邊，下邊的上邊。提及來有點繞口，那就直接上代碼吧，下面四個條件若是都成立那麼就是有交集，他們碰撞了。

rect1.x < rect2.x + rect2.w // rect1.x 表明左邊界
rect1.x + rect1.w > rect2.x // rect1.x + rect1.w 表明右邊界
rect1.y < rect2.y + rect2.h // rect1.y 表明上邊界
rect1.y + rect1.h > rect2.y // rect1.y + rect1.h 表明下邊界
//x和y能夠看作起始點，x+w和y+h能夠看作終止點。

圓形和圓形的碰撞檢測

現有circle1={x:5,y:5,r:1};circle2={x:8,y:8,r:1}。
圓形咱們通常擁有的是圓心點的XY以及他的半徑r。圓的碰撞怎麼判斷呢？計算兩個圓心點的距離，若是距離大於他們的半徑相加就能夠了。那好，咱們懟代碼了。座標相減算出來的是座標點之間的距離，這樣咱們是否是一個直角三角形？勾股定理能夠求出第三條邊，這樣咱們就能夠比較了

Math.sqrt((circle2.x - circle1.x)**2+(circle2.y - circle1.y)**2)>circle2.r + circle1.r

圓形和矩形的碰撞檢測

現有circle={x:5,y:5,r:1};rect={x:10,y:10,w:5,h:5};。
這個就有點難度了不是想象中的那麼簡單，要檢查圓形和矩形碰撞，矩形上找到離圓心最近的點，比較兩點距離對於半徑。

//咱們先找x軸，比較圓心點和矩形左邊界，若是不是比對右邊界。若是不存在左右就是存在中間唄。
if(circle.x<rect.x){return x}
else if(circle.x>rect.x+rect.w){return rect.x+rect.w}
else{return circle.x}
//咱們再去找y軸，一樣的道理.
if(circle.y<rect.y){return y}
else if(circle.y>rect.y+rect.h){return rect.y+rect.h}
else{return circle.y}
//有上面咱們得到到的量，去計算就能夠了，這就很簡單了。

圓形與旋轉矩形碰撞檢測

能夠看我下面的那個連接，我在這裏先大致說一下原理，旋轉部分是把矩形復原，把圓形經過矩形的中心點旋轉，也能夠理解爲旋轉畫布，而後找圓形中心點，以後基本原理同上。

橢圓與橢圓碰撞檢測

其餘的檢測手段

無論什麼東西，老夫就是正面剛
1.canvas的context.globalCompositeOperation="source-in";
destination-in 在源圖像中顯示目標圖像。只有源圖像以內的目標圖像部分會被顯示，源圖像是透明的。
source-in 在目標圖像中顯示源圖像。只有目標圖像以內的源圖像部分會顯示，目標圖像是透明的。

資料

1. 圓形與矩形碰撞檢測
2. 圓形與旋轉矩形碰撞檢測
3. HTML canvas globalCompositeOperation 屬性
4. 橢圓碰撞檢測