Обнаружение столкновений 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

Проблемы рисование над кругов много раз. Когда круг касается другого, вы рисуете его красным, тогда, если он не попадает в следующий круг, вы рисуете его зеленым. Также вы проверяете, попал ли сам круг, поэтому вы рисуете все круги красным дважды. Он может быть только зеленым или красным, и его нужно рисовать только один раз.

Следующие проблемы помогут вам решить проблему и ускорить ее работу. Я добавил стиль для каждого круга, который определяет его цвет. Это тест на попадание, и если он найден, установите цвет на красный.

Второй цикл цикла начинается с положения первого для цикла плюс один. Нет никакого смысла в проверке, если B ударил A, когда вы уже знаете A, ударил 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); 
    } 
}