创建一个随机圆，然后单击该圆后执行某项操作

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的值？ 任何人：您需要将事件侦听器设置为画布，并记住在创建其所在的圆的创建过程中（请注意，该圆仍然可以作为一个盒子使用，但是应该可以开始使用）

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：现在的工作示例仅在实际圆中发生单击时才触发（又名我为您提供了数学逻辑）

Answer 2

您的circle变量不是一个具有onClick属性的DOM元素，它是一个数组-数组以一种非常奇怪的方式使用。

当您执行circle.onclick = function()... ，您只是将一个函数添加到已滥用的数组中，该函数永远不会通过单击来调用。

您需要一种完全不同的方法。 您可以采取多种方式。 其中之一就是制作一个{x: rand_x, y: rand_y, radius}这样的对象，并将该对象推到存储您创建的所有圆的数组上。

然后在画布上添加一个onclick函数，这是一个可以接收点击的DOM元素，并让onclick函数遍历数组（以相反的顺序，因此最近的圆圈优先）检查单击是否在每个圆圈内。