Create a random circle and then do something once that circle is clicked

Question

I can create the random circle fine, but I want the circle to be created and when the circle is clicked, the score to be increased and a new circle is made.

I have already tried using an addEventListener but that doesn't work as it throws an error, I have also tried using a circle.onclick = function() {blah} but that doesn't do anything at all, not even throws an error.

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();
    }
}

So with this code, when the circle is clicked I expected a new one to be made again randomly, and a score to be added on. But nothing happens at all, as well no errors are thrown.

Possible duplicate of [get click event of each rectangle inside canvas?](https://stackoverflow.com/questions/5014851/get-click-event-of-each-rectangle-inside-canvas) — Anurag Srivastava, Aug 02 '19 at 12:15

AlexSNorth · Accepted Answer · 2019-08-02T14:05:00.377

your code requires a bit of rework, however it can work.

I've assumed your code sets the value for max somewhere? Anywho: You need to set the Event Listener to canvas and remember on creation of the circle where it was created (note that this will still work as a box, but it should get you started)

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/ for a working test

Edit: fixed an error Edit 2: Working example now only triggering when the click happens in the actual circle (A.K.A I did the math logic for you)

score 0 · Answer 2 · answered Aug 02 '19 at 12:33

Your circle variable isn't a DOM element that has an onClick property, it's an array - and an array being used in a very odd way at that.

When you do circle.onclick = function()..., you're just adding a function to the already-abused array, a function that will never be invoked by a click.

You need an entirely different approach. There are a number of ways you could go. One of them would be to make an object like {x: rand_x, y: rand_y, radius}, and push that object onto an array that stores all of the circles that you've created.

Then add an onclick function to your canvas, which is a DOM element which can receive clicks, and have your onclick function loop through the array (in reverse order so the most recent circles have priority) checking if clicks are inside each circle.

Create a random circle and then do something once that circle is clicked

2 Answers2