为什么此功能无法检测到重叠的圆？

Question

http://jsfiddle.net/goldrunt/SeAGU/52/ Line 49 checks for "false" on isOnCircle function before creating the new object. Function is on line 32. When creating more object, the function is passing when it should not pass.

 if (isOnCanvas(location) && !isOnCircle(location)) {
        console.log(location, isOnCanvas(location), isOnCircle(location));
        create(location);

In fact I can't get the collision detection to register true no matter what values are passed to it

(Math.pow((a.x - i.x), 2) + Math.pow((a.y - i.y), 2) <= Math.pow((a.radius + i.radius), 2))

Answer 1

here I've fixed and given more descriptive variable names so you can see what's going on. EDIT: I've noticed you don't always feed a circle but sometimes a point as A, which does not have a .radius property resulting in NaN, which also screws up your comparison.

function circleTest(a,b) {
    var DistanceX = a.x - b.x;
    var DistanceY = a.y - b.y;
    var DistanceCenter = Math.sqrt(DistanceX * DistanceX + DistanceY * DistanceY);
    var CollisionDistance = b.radius;
    if (a.radius) CollisionDistance += a.radius
    return DistanceCenter <= CollisionDistance;
}

I also noticed a problem in your function called "isOnCircle" where you are using i (a number) as if it were a circle object, with the above function this can be fixed like:

function isOnCircle(a) {
    for (var i = 0; i < circles.length; i++) {
        if (circleTest(a, circles[i])) return true;
    }
    return false;
}

Answer 2

Two problems:

• i is the numerical index you are using to iterate through the circles array but you are using it as if it was a circle object; you need to use circles[i] to get the circle at each iteration.
• a is a point and does not have a radius (in the code below I've left a.radius in just in-case you pass in a circle rather than a point and have OR ed it with 0 so you get a valid number).

Defining some additional variables (for clarity) then you can replace the isOnCircle function with this:

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||0)+c.radius;
        if (x*x+y*y <= d*d) {
            return true;
        }
    }
    return false;
}