Проверка того, что мой прицельный курсор перекрывает мой игровой компонент «враг»

Question

Я создал небольшую игру, используя JavaScript canvas.Это двухмерная стрелялка, в которой контроллером является мышь, а враги случайно появляются в пределах холста.

Я пытаюсь заставить JavaScript определять, перекрывает ли мой курсор мой компонент «враг».Логическое утверждение:

onclick, если прицел цели перекрывает вражеского врага, появляется в случайном месте.

Моя единственная проблема состоит в том, как проверить, не перекрывает ли мой прицел курсора врага

ЕслиВыражение, которое я сейчас использую, - это то, что я узнал на веб-сайте, но, похоже, оно не работает.

document.addEventListener("mousedown", function(){
    var gunshot = new Audio('gunshot.mp3');
    gunshot.play();
    if(aimcursor.x >= enemy.x && enemy.y  >= aimcursor.y&&
     enemy.y <= aimcursor.y && enemy.y <= aimcursor.y){}

Answer 1

Храните отдельный объект Gamestate, который содержит x / y позиции всех объектов.Каждый раз, когда вы рисуете на холсте, вы используете эти координаты.Возможно, вы уже делаете это.Допустим, в настоящее время в области видимости доступны enemy.x и enemy.y.

Следующее, что нужно сделать, это получить позицию курсора x / y.Вы можете получить это, проверив экземпляр MouseEvent, предоставленный обратным вызовом mousedown.

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Экземпляр MouseEvent содержит свойства clientX и clientY.Они будут отражать координаты курсора, основанные на клиентской области, а не на холсте, поэтому нам нужно сначала преобразовать это.Пожалуйста, посмотрите этот ответ:

Как получить координаты щелчка мышью на элементе холста?

Как только вы на самом деле получили координаты.Вам нужно проверить, находится ли координата мыши x / y в пределах определенной границы вокруг вражеской координаты.Это связано с тем, что современные экраны имеют высокое разрешение, и, скорее всего, ни один человек не достаточно точен, чтобы щелкнуть эту правильную область в 1 пиксель на экране.

Граница, которая является допустимой в качестве действительного ввода, называется «ограничивающей рамкой» икак правило, квадрат или прямоугольник размером изображения, используемого для представления врага.Если врагом является изображение размером 50x50 пикселей, расположенное в центре его координаты x / y.ограничивающий прямоугольник начнется с x - 25px, y - 25px и растянется до x + 25px, y + 25px.

Необходимо принять во внимание ограничивающий прямоугольник и проверить, щелкнул ли пользователь в этом регионе.Вероятно, это будет выглядеть примерно так:

if(mouse.x >= enemy.x - 25 && mouse.x <= enemy.x + 25 && mouse.y >= enemy.y - 25 && mouse.y <= enemy.y + 25) `

(от макушки головы).

Если рассчитанная позиция мыши при щелчке совпадает, это условие можетСчитайте, что хит.