Identifica quale oggetto sullo schermo ha fatto clic in html5 canvas javascript?

Question

Sto facendo un gioco in tela HTML5. Sto usando jquery così posso ottenere l'evento click e le coordinate x, y. Ho una serie di oggetti unitari e un terreno piastrellato (anche un array). Gli oggetti unitari hanno informazioni sul riquadro di delimitazione, la loro posizione e il loro tipo.

Qual è il modo più efficace per associare questo evento di clic a una delle unità?

Answer 1

loop attraverso gli oggetti unità e determinare quale è stato fatto clic in questo modo:

// '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` 

Nota, questo non gestirà gli oggetti che si intersecano complessi o problemi di z-index, ecc ... solo un punto di partenza davvero.