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

因此，我尝试创建一个游戏，其中在画布元素中随机生成一个方形框。当用户点击该框时，该框应消失，并出现一个新框。还应该有一个计时器，显示盒子出现后的时间（四舍五入到最接近的十分之一秒）。每次出现新框时，时间应重置为0。我还想保留一个分数，分数取决于用户点击框的时间，时间越短，分数越高。每次用户单击框时，都应更新分数

我只希望10个框一次随机出现一个，然后在单击最后一个框后停止

现在，我被困在如何捕捉随机生成的框的点击事件上。我在网上和StackOverflow上进行了研究，但所有的答案都非常复杂，我无法找到一种方法将这些逻辑应用到我试图实现的目标中

因此，我目前的问题是，我如何捕捉随机定位框的点击事件，以及如何在有人点击后使其消失

这是我目前的代码：

HTML:

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

---

我提前感谢你的帮助

像这样的事情应该行得通

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

canvas.addEventListener（'click'，函数（事件）
{
//移除画布位置添加的额外坐标
var x=event.clientX-event.target.OffsetLeft；
var y=event.clientY-event.target.OffsetTop；
收件箱（x，y）；
});
功能收件箱（x，y）
{
如果（（y>顶部）和（&&（y顶部）&&（xi如果canvas元素位于另一个不位于页面左上角的元素中，您还需要考虑所有父元素的偏移量。好的，我的理解是，我必须给canvas一个0的边距。我只需编写代码，使收件箱函数中的框在单击时消失？这也是saying“y”未定义。仍然不起作用：（你可以给画布一个零的边距&如果它在屏幕的左上角，你可以忽略偏移部分。我也修正了我的答案。以前收件箱函数接受事件，但它需要x和y-这就是它们未定义的原因。@developertenzin
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();

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