我应该在哪里放置这种情况？

Question

对于这个项目的最后一步，我希望不断增长的圈子在与另一个圈子相撞时停止。在创建新的圆时，isOnCircle函数已经成功检查了这一点。但是，将条件!isOnCircle添加到我的grow()函数（第61行）时，它会阻止添加任何新的圆圈。

function grow() { 
    var a = circles[circles.length - 1]; 
    if (!isOnCircle(a)){ 
     a.radius += 1; 
    }} 

也许圆是先创建，然后在检查碰撞，它是与自己碰撞。我还能在哪里放置！isOnCircle检查，以便在每个半径增加时检查并停止增长功能？ check this

//set up canvas 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var circles = []; 

//create circle 
function create(location) { 
    circles.push({ 
     x: location.x, 
     y: location.y, 
     radius: 10, 
     color: '#' + Math.floor(Math.random() * 16777215).toString(16) 
    }); 
} 

//figure out mouse position 
var rect = document.getElementById("canvas").getBoundingClientRect(); 
// Get canvas offset on page 
var offset = { 
    x: rect.left, 
    y: rect.top 
}; 

function isOnCanvas(a) { 
    if ((a.x >= 0 && a.x <= rect.width) && (a.y >= 0 && a.y <= rect.height)) { 
     return true; 
    } 
    return false; 
} 

function isOnCircle(a) { 
    var i = 0, 
     l = circles.length, 
     x, y, d, c; 
    for (; i < l; ++i) { 
     c = circles[i]; 
     x = a.x - c.x; 
     y = a.y - c.y; 
     d = (a.radius || 10) + c.radius; 
     if (x * x + y * y <= d * d) { 
      return true; 
     } 
    } 
    return false; 
} 

// draw all circles 
function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (var i = 0; i < circles.length; i++) { 
     var p = circles[i]; 
     ctx.beginPath(); 
     ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI); 
     ctx.fillStyle = p.color; 
     ctx.fill(); 
    } 
} 

//make last drawn circle 1px bigger 
function grow() { 
    var a = circles[circles.length - 1]; 
     a.radius += 1; 
} 

//find percentage of canvas filled in 
var totalSpace = canvas.width * canvas.height; 
var totalFilled = function() { 
    total = 0; 
    for (var i = 0; i < circles.length; i++) { 
     var p = circles[i]; 
     total += Math.PI * Math.pow(p.radius, 2); 
    } 
    return total; 
    console.log(total); 
} 

    function findPercentage() { 
     return (totalFilled()/totalSpace) * 100; 
    } 

    function updateInfo() { 
     percentage = findPercentage(); 
     document.getElementById("percentage").innerHTML = "You've filled in " + percentage.toFixed(1) + "%"; 
    } 

    //do all the stuff 
var animate = function() { 
    grow(); 
    draw(); 
    updateInfo(); 
} 

//put this outside function so we can stop it later 
var growLoop; 

window.onmousedown = function (e) { 
    // get event location on page offset by canvas location 
    var location = { 
     x: e.pageX - offset.x, 
     y: e.pageY - offset.y 
    }; 

    if (isOnCanvas(location) && !isOnCircle(location)) { 
     create(location); 
     draw(); 
     updateInfo(); 
     growLoop = setInterval(animate, 100); 
    } 
}; 

window.onmouseup = function() { 
    clearInterval(growLoop); 
} 
window.onmouseout = function() { 
    clearInterval(growLoop); 
} 

Answer 1

它与自身碰撞。

也许。在碰撞检测中你绝对应该避免这种情况：

function isOnCircle(a) { 
    var l = circles.length, 
     x, y, d, c; 
    for (var i = 0; i < l; ++i) { 
     c = circles[i]; 
     if (a == c) // add these 
      continue; // two lines! 
     x = a.x - c.x; 
     y = a.y - c.y; 
     d = (a.radius || 10) + c.radius; 
     if (x * x + y * y <= d * d) { 
      return true; 
     } 
    } 
    return false; 
} 

Answer 2

它与自身发生碰撞。既然你知道当前圈永远是最后一个在圈子里，你可以修改isOnCircle这样的：

l = circles.length - 1, 

，这样就不会核对当前循环。

http://jsfiddle.net/SeAGU/91/