衝突検出Javascriptが機能していない（むしろ動作していない）

Question

私はいくつかの気泡が浮遊しているシンプルなキャンバスを書きました。彼らは衝突していないときには緑色で、いずれかが赤色であると考えられます。何らかの理由で、彼らはすべて緑色ですが、1つです。そして、泡が衝突すると、赤色に変わる唯一のものは、元の泡に触れるもので、緑色から始まりません。私はあなたに本当に明白な何かを見逃していることを知っていますが、私はそれを何千回も上回り、それを見ることはできません。誰かが私に知らせてくれれば、私は愚かな気分になる準備ができている...ありがとう。ここで

は、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

問題は、あなたが上で描画されています多くの回円。サークルが別のサークルに接触しているときは赤を描画し、次のサークルに当たっていなければ緑を描画します。また、サークルがヒットしたかどうかをチェックしているので、すべての円を赤色に2回描画します。緑色または赤色のみにすることができ、1度だけ描画する必要があります。

以下は、問題を解決し、やや速く動作させます。色を定義するスタイルを各サークルに追加しました。ヒットをテストし、見つかった場合は色を赤に設定します。

forループは、最初のforループ+ 1の位置から開始します。あなたが既に知っているときに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); 
    } 
}