使用HTML5 Canvas和Javascript点击对象？

Question

我有一个运行以下功能的mousedown事件侦听器：

function getPos(event) { 
    var x = event.x; 
    var y = event.y; 

    x -= canvas.offsetLeft; 
    y = canvas.offsetTop; 

    for(var checker of board.checkers) { 
     if(x >= checker.x + 32 && x <= checker.x - 32) { 
      if(y >= checker.y + 32 && y <= checker.y -32) { 
       alert("HE CLICKED"); 
      } 
     } 
    } 
} 

由于跳棋是圆形的，它们的起源是在中心，这就是为什么我检查checker.x + 32或checker.x - 32

由于某种原因，alert("He clicked")未出现。当我弄乱不平等符号时，我会得到alert("he clicked")，但是在错误的情况下。

请问有人对这个问题有所了解吗？

Answer 1

以你的条件语句的密切关注：

if(x >= checker.x + 32 && x <= checker.x - 32) { 
    if(y >= checker.y + 32 && y <= checker.y -32) { 
     alert("HE CLICKED"); 
    } 
} 

1. 您正在使用&&这意味着两个条件必须是在同一时间如此 - 因为你检查的点击，这是不可能检查器边界外。

2. 相反，您应该在检查器的边界内寻找点击。

像这样：

if(x <= checker.x + 32 && x >= checker.x - 32) { 
    if(y <= checker.y + 32 && y >= checker.y -32) { 
     alert("HE CLICKED"); 
    } 
}