如何为画布内随机定位的框添加点击事件

How to add a click event for a randomly positioned box inside of canvas?

本文关键字：添加 事件 定位 布内随      更新时间：2023-09-26

所以我正在尝试创建一个游戏，其中方框在画布元素中随机生成。当用户单击该框时，该框应消失，并应出现一个新框。还应该有一个计时器，显示自框出现以来已经过去了多长时间（四舍五入到最接近的十分之一秒）。每次出现新框时，时间应重置为 0。我还想保留一个分数，分数基于用户点击框所花费的时间，时间越短，分数越高。每次用户单击框时都应更新分数。

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

现在，我被困在如何捕获随机生成的框的点击事件上。我在网上和StackOverflow上进行了研究，但所有的答案都非常复杂，我找不到将这些逻辑应用到我想要完成的事情中的方法。

所以我目前的问题是我如何捕获随机定位框的点击事件，以及一旦有人点击它，我怎样才能让它消失？

这是我目前的代码：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();

我提前感谢您的帮助。

这样的事情应该有效。

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
   }
}
相关文章：