如何檢查兩條用戶畫的（彎曲的）線是否相交？

Question

我正在考慮制作游戲Sprouts的在線版本，可能使用JavaScript Web瀏覽器圖形庫p5.js。

您可以閱讀有關它的更多信息，但是基本上有2個玩家用鼠標在各點之間畫線。 這些線可以以任何方式是直線或彎曲的。 規則之一是沒有2條線可以交叉。

我還沒有開始制作游戲，但是要預先計划，除了一個問題，所有事情似乎都相對容易實現：

用戶畫一條線時，我需要弄清楚該線是否與另一條線相交。 但是，由於這些線不是線性的，也不是我慣常使用的數學方法，因此似乎沒有一種簡單的數學方法可以檢查交叉點。

考慮到我知道直線上每個像素的位置，我如何檢查兩條直線？

我為沒有代碼而道歉，我還沒有開始。 如果希望在答案中包含代碼，則可以使用psuedocode或您可能熟悉的任何gui編程。 但是，我寧願使用純粹假設的答案，因為一切都在這個階段。

這是我的一些想法：

• 對於該行上的每個像素，我可以檢查其他任何行是否具有相同位置的像素，在這種情況下它們會重疊。 這似乎效率低下，所以我想出的另一點是效率更高，但剛性和可靠性更低。
• 在繪制線條之前，如果確保所有線條都是一種顏色，則可以使用getPixel()類的方法針對該線條上的每個像素檢查該像素是否已經使用與線條顏色相同的顏色上色。因此，中止畫線。 這種解決方案似乎容易出現許多問題，並且有些脆弱。

這兩種解決方案要么以效率為代價，要么以可靠性為代價。 您還有其他解決方案嗎？ 請記住，這將在瀏覽器中運行，因此效率很重要。

Answer 1

請記住，這將在瀏覽器中運行，因此效率很重要。

您需要讓自己更好地了解哪種“效率”對您和您的用戶很重要。 您概述的兩種方法對我來說似乎都是合理的。 在您嘗試解決方案並評估其性能之前，我不會認為解決方案是低效的。

退后一步，通常您需要將行存儲在某種數據結構中。 您說過這些線不是數學的，但是您可以將這些線分解為單獨的線段或點，它們是數學的。 那可能是線段的數組，布爾值的2D數組，點的映射，或四叉樹。 有很多選擇。 然后，您需要檢查這些線或點與其他玩家添加的新線或點之間是否存在碰撞。

要考慮的另一種選擇是降低輸入空間的分辨率。 例如，也許您的游戲窗口是500x500像素，但實際上您只需要將游戲板設為100x100的可能的點位置即可。 您可以放大100x100游戲板，使其以500x500顯示。 這將提高您提出的任何解決方案的“效率”。

但是，再次，我現在不會擔心“效率”。 您提到的任何一種解決方案似乎都不錯。 讓它正常工作，然后在發現問題時對其進行迭代。 祝好運。

Answer 2

Mike Bostock 撰寫的有關Sutherland-Hodgman算法的文章可能會讓您感興趣。 它與2個多邊形而不是2條線的相交關系更大，但是可能可以適應您的問題。