Ekrandaki hangi nesnenin html5 canvas javascript ile tıklandığını belirleyin?

Question

html5 tuvalinde oyun yapıyorum. Tıklama olayını ve tıklamaları x, y koordinatlarını alabilmem için jquery kullanıyorum. Bir dizi birim nesnem ve kiremitli bir arazi (ayrıca bir dizi) var. Birim nesneleri sınırlayıcı kutu bilgisine, konumlarına ve türlerine sahiptir.

Bu tıklama etkinliğini birimlerden biriyle eşleştirmenin en etkili yolu nedir? şöyle tıklandığı

Answer 1

birim nesneler aracılığıyla döngü ve belirler:

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

Not

bu kompleks kesişen nesneler veya Z-endeksi sorunları vb Kaldıramayacaksan ... sadece bir başlangıç ​​noktası gerçekten.