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/

我应该把这个条件放在哪里？

2 个答案: