Jcanvas層碰撞

Question

我試圖做一個功能來檢測是否兩層碰撞。 使用Jquery，jcanvas和HTML5 canvas

我正在構建一種飛行模擬器，玩家可以在其中進行上升/下降操作，以免熱氣球飛向玩家。

我需要檢測飛機是否將與氣球層碰撞。

我試過檢查x / y層的位置，但是由於熱氣球形狀不明顯，所以效果不佳。

想象一下：

      ______________               __
    /                \            / /       _
   /                  \      ___/__/_______/ /\
  |   Air ballon       |    /    Plane 1      /
  |                    |    \___\  \_______\ \
   \                  /          \  \       \/
    \                /            \__\
     \              /
      \            /                __
       \          /                / /       _
        \        /            ___/__/_______/ /\
         \      /            /    Plane 2      /
          \____/             \___\  \_______\ \
           |__|                   \  \       \/
           |__|                    \__\

在我當前的解決方案中，兩個平面將同時碰撞。 當計划實際上與空氣氣球籃碰撞時，我需要飛機2稍后碰撞

Answer 1

您遇到的問題通常稱為沖突檢測 。

碰撞檢測的最常見方法是將每個對象抽象為幾何形狀，然后檢查這些形狀是否相交。 常見的選擇是矩形或圓形，因為檢查它們是否相交非常簡單。

另一種方法是使用基於像素的碰撞檢測。 您在單獨的圖層上繪制要檢查的兩個對象，然后在兩個圖層上檢查每個像素的顏色值。 當兩個字母的Alpha值都大於0時，就會發生沖突。 優點是非常准確，但缺點是CPU占用率很高，因為您需要檢查很多像素。 為了優化CPU負載，可以將其與幾何方法結合使用以減少需要檢查的像素數量。

1. 在每個對象周圍定義一個矩形
2. 檢查矩形是否相交
3. 當他們計算相交面積時
4. 將兩個對象繪制為單獨的空白畫布
5. 使用context.getImageData()兩個畫布上區域的像素數據。
6. 比較返回數組的alpha值。 當兩個畫布上的相同像素都大於0時，就會發生沖突。