javascript - 创建一个随机圆圈，然后在单击该圆圈后执行某些操作

Question

我可以很好地创建随机圆圈，但我希望创建圆圈，然后单击圆圈时，分数会增加并创建一个新圆圈。

我已经尝试使用 addEventListener 但这不起作用，因为它会引发错误，我还尝试使用 circle.onclick = function() {blah} 但这根本没有做任何事情，甚至没有抛出错误。

var canvas = document.getElementById("cnv")
var context = canvas.getContext("2d");

document.getElementById("startGame").addEventListener("click", function() {
    createGameCircle();
});

function createGameCircle() {
    radius = 20;

    context.clearRect(0, 0, canvas.width, canvas.height);

    var circle = [
        context.beginPath(),
        rand_x = Math.random(1) * max,
        rand_y = Math.random(1) * max,
        context.arc(rand_x, rand_y, radius, 0, 2 * Math.PI),
        context.fill(),
        context.closePath()
    ];

    circle;

    circle.onclick = function() {
        score++;
        document.getElementById("score").innerHTML = (score);
        createGameCircle();
    }
}

因此，使用这段代码，当单击圆圈时，我希望再次随机生成一个新圆圈，并添加一个分数。但什么也没发生，也没有抛出任何错误。

Answer 1

您的代码需要一些返工，但它可以工作。

我假设您的代码在某处设置了 max 的值？ Anywho:您需要将事件监听器设置为 Canvas ，并记住创建圆的位置(请注意，这仍然可以作为一个框使用，但它应该可以帮助您开始)

var canvas = document.getElementById("cnv")
var context = canvas.getContext("2d");
var elements = [];

document.getElementById("startGame").addEventListener("click", function() {
    createGameCircle();
});

canvas.addEventListener('mousedown', function(e) {
    var x = event.pageX - canvas.offsetLeft,
        y = event.pageY - canvas.offsetTop;
    elements.forEach(function(element) {
            var dx = element.rand_x - x;
            var dy = element.rand_y - y;
            if (dx * dx + dy * dy <= element.radius * element.radius) {
            createGameCircle();
        }
    });
});
function createGameCircle() {

    context.clearRect(0, 0, canvas.width, canvas.height);
    elements.pop();

    var circle = {
        rand_x: Math.random(1) * max,
        rand_y: Math.random(1) * max,
        radius: 20
    };

    elements.push(circle);    

    context.beginPath(),
    context.arc(circle.rand_x, circle.rand_y, circle.radius, 0, 2 * Math.PI),
    context.fill(),
    context.closePath()
}

https://jsfiddle.net/hcqsjzfu/1/用于工作测试

编辑:修正了一个错误编辑2:工作示例现在仅在实际圆圈中发生点击时触发(又名我为你做了数学逻辑)