Xác định đối tượng nào trên màn hình được nhấp trong html5 canvas javascript?

Question

Tôi đang tạo trò chơi trong canvas html5. Tôi đang sử dụng jquery vì vậy tôi có thể nhận được các sự kiện nhấp chuột và các nhấp chuột x, y tọa độ. Tôi có một mảng các đối tượng đơn vị và địa hình lát gạch (cũng là một mảng). Các đối tượng đơn vị có thông tin hộp giới hạn, vị trí của chúng và loại của chúng.

Cách hiệu quả nhất để ánh xạ sự kiện nhấp chuột này với một trong các đơn vị là gì?

Answer 1

Vòng qua các đối tượng đơn vị và xác định được nhấp như vậy:

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

Lưu ý, điều này sẽ không xử lý đối tượng giao nhau phức tạp hoặc các vấn đề z-index vv ... chỉ là một điểm khởi đầu thực sự.