Определите, какой объект на экране нажал в html5 canvas javascript?

Question

Я делаю игру на холсте html5. Я использую jquery, чтобы я мог получить событие click и щелчки 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 и т. Д. ... просто отправная точка на самом деле.