如何为画布内随机放置的框添加单击事件？

Question

So I am trying to create a game where a square box is generated randomly in a canvas element. And when the user clicks on the box, the box should disappear and a new one should appear. There should also be a timer showing how long it has been since the box appeared (rounded to the nearest tenth of a second). The time should reset to 0 each time a new box appears. I also want to keep a score, with the score based on how long it took the user to click the box, shorter times leading to higher scores. The score should be updated each time the user clicks on a box.

And I only want 10 boxes to appear randomly one at a time and then stop after the last box is clicked.

Right now, I am stuck on how to capture the click event for the randomly generated boxes. I researched online and on StackOverflow but all of the answers were really complicated to follow and I couldn't find a way to apply those logic into what I am trying to accomplish.

So my problem currently is how would I capture the click event for the randomly positioned box and how can I make it disappear once someone clicks it?

Here is my code currently: http://codepen.io/developertenzin/full/ZQgxmZ/

HTML:

<canvas id="myCanvas" width=500 height=500>

</canvas>

CSS:

#myCanvas {
    margin: auto;
    display: block;
    border: 1px solid black;
}

JAVASCRIPT:

var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");

c.fillStyle = "black";
function makeBox() {
    setTimeout(function() {
        var top = Math.random();
        top = top * 500;
        var left = Math.random();
        left = left * 500;
        c.fillRect(top, left, 50, 50);
        createdTime = Date.now();
    }, 1000);
}

makeBox();

I thank you for your help in advance.

Answer 1

Something like this should work.

canvas.addEventListener('click',function(event)
{
    //remove the extra coords added on by the position of canvas
    var x=event.clientX-event.target.OffsetLeft;
    var y=event.clientY-event.target.OffsetTop;
    inBox(x,y);
});
function inBox(x,y)
{
   if ((y>top)&&(y<top+50)&&(x>left)&&(x<left+50))
   {
       //inside the bounds
   }
}