HTML5 Canvas：鼠標和多邊形碰撞檢測

Question

所以我用HTML5和Javascript制作塔防游戲。 我唯一的問題是檢測鼠標何時與攻擊者的路徑接觸，這是阻止玩家在路徑上建造塔的必要條件。 攻擊者的路徑在MAP.js文件中確定（參見底部的鏈接），由二維數組（包含x和y對的數組）確定，所以我必須使用的是一系列點連接時組成路徑。 我只是想禁止玩家將塔放在路徑的50個像素內。 說實話，我對碰撞檢測很可怕，所以一些幫助將非常感激。

以下是所有代碼的鏈接： http ： //shapeshifting.comuv.com/Tower_Defense/td/

如您所想，只有.js文件適用，但大多數相關代碼都在objects.js文件中。 （請原諒雜亂）

Answer 1

碰撞檢測是編碼游戲的舊的隱藏問題之一。 通常人們采用darkpenguin的方法以某種方式預先計算靜態地圖上和不可放置的地方。 下一步是提出一種指定最有效碰撞圖的方法。

你不希望你的游戲在用戶移動他們的鼠標時做大量的數學運算 - 它需要簡短快速 - 所以預先計算到快速的東西是至關重要的。

如果您的地圖是網格，那么您的答案就在那里 - 碰撞地圖是一個預先計算的二維數組 - 基本上是一個非常小的黑白圖像，網格上每個地方都有一個像素。 白色像素（1）是可放置的而黑色像素（0）不是。 您只需使用此真/假的2D數組作為查找。 如果要保存內存，可以將網格上32個空格的每個條帶捆綁成一個位標志。

如果你的地圖不是網格，那么你仍然想要預先計算事物，但策略有點復雜。 第一種可能性是像Hitesh那樣執行數學生成稍高分辨率的碰撞圖，然后其余的就像網格策略一樣 - 例如，如果每個4x4像素塊是一個碰撞條目，那么塔是否可以是放置是測試它的坐標是否在1到1之上測試 - 你可能要求100％的測試是1，或者你可以讓他們達到一點，讓75％的測試成為1。

如果這仍然不夠詳細，您可以執行這些更復雜的多邊形測試，但您希望它們盡可能簡單。 當不使用預先計算的網格時，最簡單的2D碰撞測試是2個圓圈 - 您只需計算它們的中心之間的距離，並檢查它是否大於或小於它們的半徑之和。 如果你將你的怪物路徑預先計算成一條圓圈，下一步是將這些圓圈分成......猜猜是什么......一個網格。 這可以防止每個檢查都必須測試地圖上的每個圓圈。 這允許您在碰撞圖中擁有大量這些圓，因為碰撞測試首先查找塔當前所在的網格條目，然后檢查它是否與它最接近的圓相撞，而不是整個地圖。 重要的是要注意，這個預先計算的圓形列表網格通常在多個相鄰網格條目中具有相同的圓，因為包含給定圓的任何部分的每個網格條目必須在其碰撞清單中具有該圓。

關於前兩種網格方法的一個好處是，它很容易自己進行QA - 將碰撞圖存儲為圖像並進行視覺檢查以確保它看起來正好適合它所基於的地圖。 如果您不想編寫代碼來生成它們，也可以手動繪制它。

圓形方法為您提供合理的曲線，並且可以導致更精細的碰撞邊緣細節，但是顯然更難以測試並確保沒有地圖具有壞的碰撞地圖。 編寫地圖生成工具也是一項工作。

祝好運！

Answer 2

我會逐步解決這個問題。 讓我們來看看你的開始。 您有一個由點定義的路徑 - 成對的點定義一個線段。 所以你真正擁有的是由線段組成的路徑。 當用戶移動鼠標時，您將獲得當前位置的x，y坐標。 您要做的是找到鼠標指向所有線段的距離。 如果它距離任何線段小於50像素，那么您不希望允許它們在那里構建。

要查找點和線段之間的距離，偽代碼看起來像這樣。 假設點A和B表示線段的兩端，點C表示鼠標點。

float distancePoint2LineSegment(Point a, Point b, Point c) {
  Vector ab = b - a
  Vector ac = c - a
  Vector bc = c - b

  float e = dotProduct(ac, ab)
  if (e <= 0.0)
    return sqrt(dotProduct(ac, ac))

  float f = dotProduct(ab, ab)
  if (e >= f)
    return sqrt(dotProduct(bc, bc))

  return sqrt(dotProduct(ac, ac) - e * e / f)
}

這可以回答你的碰撞檢測問題，但我想你會想看一下性能。 您的路徑中將包含多少個線段，並且您希望每次用戶移動鼠標時計算每個線段的距離？ 您可以將線段放入四叉樹中，這樣您只需要針對較少數量的線段測試鼠標點碰撞。

Answer 3

它可能更簡單，更快速地定義用戶可以在地圖文件中明顯放置塔的區域...將每個區域定義為凸多邊形（可能包括地圖邊緣，分割凹多邊形，更喜歡水平或垂直線，然后測試鼠標位於其中一個多邊形中，請參閱此答案以了解實現方法

如何測試點是否在2D整數坐標中的凸多邊形內？

分解為三角形使測試更簡單