javascript - 如何为 Canvas 内随机定位的框添加点击事件?

标签 javascript html canvas

所以我正在尝试创建一个游戏,其中在 Canvas 元素中随机生成一个方框。当用户单击该框时,该框应该消失并出现一个新框。还应该有一个计时器显示自该框出现以来已经过了多长时间(四舍五入到最接近的十分之一秒)。每次出现新框时,时间应重置为 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
   }
}

关于javascript - 如何为 Canvas 内随机定位的框添加点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35592475/

相关文章:

javascript - JQuery 无法从单独的 javascript 文件中找到变量

javascript - 如何在绘图区域图中用我们选择的颜色填充区域

javascript - d3.randomInt 不是函数

javascript - Canvas 加载事件未触发

javascript - 禁止循环函数

javascript - Firefox 在 dragenter 事件上发送垃圾邮件

html - CSS loader/Progress spinner Material angular 2+

javascript - 无法通过 CSS 设置 z-index

javascript - 更好的 Canvas 运动模糊

css - 用 fabricjs 在 Canvas 中心画一条垂直线?