Как добавить событие щелчка для случайно помещенного поля внутри холста?

Question

Итак, я пытаюсь создать игру, в которой квадратный квадрат создается случайным образом в элементе canvas. И когда пользователь нажимает на поле, поле должно исчезнуть, и появится новый. Также должен быть таймер, показывающий, сколько времени прошло с момента появления окна (округление до ближайшей десятой доли секунды). Время должно быть сброшено до 0 каждый раз при появлении нового окна. Я также хочу, чтобы оценка была оценена с учетом того, сколько времени потребовалось пользователю, чтобы щелкнуть поле, короче, что привело к более высоким показателям. Счет должен обновляться каждый раз, когда пользователь нажимает на поле.

И я хочу, чтобы 10 ящиков появлялись случайным образом по одному, а затем останавливались после нажатия последнего окна.

Прямо сейчас, я зациклился на том, как захватить событие click для случайно созданных ящиков. Я исследовал онлайн и на StackOverflow, но все ответы были очень сложными, и я не мог найти способ применить эту логику к тому, чего я пытаюсь выполнить.

Итак, моя проблема заключается в том, как я могу захватить событие click для случайно помещенного поля и как я могу заставить его исчезнуть, как только кто-то щелкнет его?

Вот мой код в настоящее время: 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(); 

Я благодарю вы за вашу помощь заранее.

Answer 1

Нечто подобное должно работать.

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 
    } 
}