確定屏幕上的哪個對象在html5 canvas javascript中被點擊？

Question

我在html5畫布上製作遊戲。我使用jquery，所以我可以得到點擊事件和點擊x，y座標。我有一個單位對象和平鋪地形（也是一個數組）的數組。單位對象具有邊界框信息，它們的位置和類型。

將此點擊事件映射到其中一個單元的最有效方法是什麼？

Answer 1

循環遍歷單位對象，並確定所單擊像這樣：

// 'e' is the DOM event object 
// 'c' is the canvas element 
// 'units' is the array of unit objects 
// (assuming each unit has x/y/width/height props) 

var y = e.pageY, 
    x = e.pageX, 
    cOffset = $(c).offset(), 
    clickedUnit; 

// Adjust x/y values so we get click position relative to canvas element 
x = x - cOffset.top; 
y = y - cOffset.left; 
// Note, if the canvas element has borders/outlines/margins then you 
// will need to take these into account too. 

for (var i = -1, l = units.length, unit; ++i < l;) { 
    unit = units[i]; 
    if (
     y > unit.y && y < unit.y + unit.height && 
     x > unit.x && x < unit.x + unit.width 
    ) { 
     // Escape upon finding first matching unit 
     clickedUnit = unit; 
     break; 
    } 
} 

// Do something with `clickedUnit` 

注意，這不會處理複雜的交叉對象或z-index的問題等等......只是一個起點真的。