使用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"); 
    } 
}