碰撞檢測Javascript不工作（而不是工作）

Question

我寫了一個簡單的畫布，幾個浮動的氣泡。當它們中的任何一個都不碰撞時，它們應該是綠色的。出於某種原因，他們都是綠色的，但一個。當氣泡碰撞時，只有那些接觸到原始氣泡的紅色氣泡纔會開始變綠。我知道我錯過了一些對你們顯而易見的東西，但我經歷了一千次，卻看不到它。如果任何人都可以請讓我知道，我準備好感到愚蠢......謝謝。

這裏是GitHub的要點鏈接：

https://gist.github.com/anonymous/e172bb18c078a2e9a797b8a30fdafcc3

下面是來自碰撞檢測片段繪製在畫布上：

// Draw to Canvas 
var draw = function() { 
ctx.clearRect(0,0,600,400); 
for(var i = 0 ; i < spawnArr.length; i++){ 

// Collision Detect & Correct 
for(var j = 0; j < spawnArr.length; j++) { 
    var dx = spawnArr[i].x - spawnArr[j].x; 
    var dy = spawnArr[i].y - spawnArr[j].y; 
    var distance = Math.sqrt(dx * dx + dy * dy); 

    if (distance < spawnArr[i].rad + spawnArr[j].rad) { 

     ctx.strokeStyle = "#FF0000"; 
     ctx.beginPath(); 
     ctx.arc(spawnArr[i].x, spawnArr[i].y, spawnArr[i].rad, 0, 2*Math.PI); 
     ctx.closePath(); 
     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(spawnArr[j].x, spawnArr[j].y, spawnArr[j].rad, 0, 2*Math.PI); 
     ctx.closePath(); 
     ctx.stroke(); 
     // console.log('hit'); 
    } 
    else { 
    ctx.strokeStyle = "#00FF00"; 
    ctx.beginPath(); 
    ctx.arc(spawnArr[i].x, spawnArr[i].y, spawnArr[i].rad, 0, 2*Math.PI); 
    ctx.closePath(); 
    ctx.stroke(); 

    ctx.beginPath(); 
    ctx.arc(spawnArr[j].x, spawnArr[j].y, spawnArr[j].rad, 0, 2*Math.PI); 
    ctx.closePath(); 
    ctx.stroke(); 
    //console.log('miss'); 
    } 
} 

Answer 1

問題是你正在繪製在圈多次。當一個圓圈觸及另一個圓圈時，將其繪製成紅色，如果它未觸及下一個圓圈，則將其繪製爲綠色。此外，您還要檢查圓圈是否自動打開，因此您將所有圓圈繪製爲紅色兩次。它只能是綠色或紅色，而且只能繪製一次。

以下內容將解決您的問題並使其運行速度更快。我已經爲定義其顏色的每個圓圈添加了一種樣式。它測試一個命中，如果發現將顏色設置爲紅色。

第二個for循環從第一個for循環加上一個的位置開始。當你已經知道B擊中A時沒有任何意義B擊球B

// Draw to Canvas 
var draw = function() { 
    ctx.clearRect(0, 0, 600, 400); 
    function drawThing(thing) { 
     ctx.strokeStyle = thing.style; 
     ctx.beginPath(); 
     ctx.arc(thing.x, thing.y, thing.rad, 0, 2 * Math.PI); 
     ctx.stroke(); 
    } 

    for (var i = 0; i < spawnArr.length; i++) { 
     var t1 = spawnArr[i]; 

     var t1.style = "#00FF00"; 
     // Collision Detect & Correct 
     for (var j = i + 1; j < spawnArr.length; j++) { 
      var t2 = spawnArr[j]; 
      var dx = t1.x - t2.x; 
      var dy = t1.y - t2.y; 
      var distance = Math.sqrt(dx * dx + dy * dy); 

      if (distance < t1.rad + t2.rad) { 
       t1.style = "#FF0000"; 
      } 
     } 
     drawThing(t1); 
    } 
}