JavaScript中畫布上的碰撞檢測

Question

我正在為大學分配游戲 。 這個想法是通過畫一條線（單擊，拖動並釋放以畫一條線）來阻止它們，從而保護中心圓免受傳入的小行星（線）的傷害。 小行星撞到一條直線上應該會同時摧毀這條小行星。

我目前遇到的問題是未檢測到碰撞。

我有直線和小行星的物體陣列。 這些行僅由開始和結束x＆y組成，小行星由隨機速度和隨機角度（其入射角）組成-旋轉上下文，繪制小行星，然后將其重置為下一行。

為了檢測碰撞，我使用getImageData並在小行星前面進行檢查，但是該行在該迭代中會前進很多像素（基本上是它們的速度），如果顏色是紅色，它將破壞小行星-我還沒來得及銷毀這條線，將解決我遇到的障礙（不過我們建議）。

function asteroids_draw() {
            for (var i = 0; i < asteroids.length; i++) {
                //  Drawing setup
                context.save();
                context.translate(width / 2, height / 2);
                context.rotate(asteroids[i].angle);             

                //  Detecting close asteroids
                if ((asteroids[i].distance - asteroids[i].speed) < planet.size) {
                    asteroids.splice(i, 1);
                    game_life_lost();
                    context.restore();      
                    return;

                } else if ((asteroids[i].distance - asteroids[i].speed) < 150){
                    asteroids[i].colour = '#FF0000';
                }

                //  Scanning ahead for lines                    
                for (var j = 0; j < asteroids[i].speed; j++) {
                    if (context.getImageData(asteroids[i].distance - j, 0, 1, 1).data[0] == 255) {                          
                        asteroids.splice(i, 1);
                        context.restore();      
                        return;
                    }
                }                   

                //  Drawing asteroid
                context.beginPath();
                context.moveTo(asteroids[i].distance -= asteroids[i].speed, 0);
                context.lineTo(trig, 0);
                context.strokeStyle = asteroids[i].colour; 
                context.stroke();               
                context.closePath();

                context.restore();      
            }
        }

問題是，小行星從不與直線碰撞，我一生都看不到為什么，也看不到另一種簡單的方式。 任何建議將不勝感激，在此先感謝。

Answer 1

我認為您的問題是，當旋轉上下文時，先前繪制的項目（線）不會旋轉，只有旋轉后繪制的對象才會旋轉。 有關更多信息，請參見此頁面 。

在平移和旋轉畫布之前，您可以嘗試執行小行星/直線相交測試，並使用余弦和正弦找到要從中獲取圖像數據的像素的x和y坐標。

var pixelLocation = 
    [Math.cos(asteroids[i].angle) * j, Math.sin(asteroids[i].angle) * j];
if (context.getImageData(pixelLocation[0], pixelLocation[1], 1, 1).data[0] == 255) {

只要確定您的角度是弧度，然后再傳遞給cos和sin。

Answer 2

我再考慮了這個問題，並意識到這種做事方法絕對不是最好的方法。 它應該在沒有視圖的情況下也是可行的-一種“模型視圖控制器”設計模式。 解決該問題的最佳方法是使用數學！

兩條線的交點有簡單的數學運算，但這需要一個范圍內兩條線的交點。 我發現了一種算法 ，它使用八個坐標-兩行的開始x＆y和結束x＆y進一步簡化了這一過程。

我已經發布了結果 。 謝謝您的幫助。