Question

我无法尝试使用基于画布的方块来跟随鼠标。这是我试图使用的方法：

canvas.addEventListener('mousedown', function(event) {
     document.getElementById('debug3').innerHTML = 'works';//Just debug stuff.

     for (i=0;i>10;i++) { //to loop through squares.
        document.getElementById('debug5').innerHTML = 'works';
        if (mouseX >= square[i].x - 20 && mouseX <= square[i].x + 40 && mouseY >= square[i].y - 20 && mouseY <= square[i].y + 40) {//To see if mouse coordinates equal square ones.
            square[i].x = mouseX;//Just defining that mouse coordinates equal square ones.
            square[i].y = mouseY;
            document.getElementById('debug6').innerHTML = 'works';
        }
    }
}, true);

我想要选择十个方格，所以我把它们的坐标放在一个数组中。 -20和+40是这样我可以有一个虚构的正方形，表示接受点击的范围（点击一个像素非常困难）。这些正方形应该是动画的，所以我的面积是其面积的两倍（正方形的面积为400像素）。 for循环是循环用户选择的可能方块。在那之后，这很明显。

我的问题是，这不会发生。我停止了为方块设置动画，让它们更容易为我点击，但代码却无法正常工作。根据我的调试语句，当我按下时，事件监听器工作。这是第一个调试语句。问题是for循环永远不会被触发，我的第二个调试语句永远不会起作用。因此，我的第三个也没有（你可能会看到它们标记为3,5和6：前两个是我的鼠标坐标，第四个是鼠标向上事件，它有同样的问题）。

感谢。

编辑：这是定义mouseX和mouseY的代码。

function initCanvas() {
        context.canvas.addEventListener('mousemove',function(event) {
                var mouseX = Math.floor(event.clientX);
                var mouseY = Math.floor(event.clientY);

                document.getElementById('debug1').innerHTML = mouseX;
                document.getElementById('debug2').innerHTML = mouseY;//test debug stuff
        });
 }
window.addEventListener('load', function(event) {
        initCanvas();
});

我已经测试了这个。有用。这不是问题。

再次感谢GameAlchemist。

如何在鼠标单击时获得一个跟随鼠标坐标的正方形？

0 个答案: