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循环的位置加一个开始。当你已经知道A命中B

时，检查B是否达到A是没有意义的

// 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);
    }
}

碰撞检测Javascript不工作（相当我不工作）

1 个答案: