JavaScript

Можно ли отловить событие когда один элемент попадает на другой в js?

Хай, делаю мини игру на сайтеЕсть элемент gun::before который является пулей, есть блок ducks, в котором находятся элементы duck, сейчас игра работает так, ты нажимаешь на утку она исчезает и происходит анимация выстрела с помощью left: ; но можно ли как то удалить тех duck в которых в момент анимации попала пуля (gun::before)?

Код:
 let game_score = 0; 

const game = $('.game'); 

const game_gun = $('.game-gun'); 

const game_ducks = $('.game-ducks'); 

 

function shot() { 

  if (!game_gun.hasClass('shot')) { 

    game_gun.addClass('shot'); 

  } 

  game_gun.on('animationend', function () { 

    game_gun.removeClass('shot'); 

  }); 

} 

 

game.click(function (event) { 

  // Получаем координаты клика   

  shot(); 

  let cursorX = event.pageX; 

  let cursorY = event.pageY; 

 

  let centerX = game_gun.offset().left + (game_gun.width() / 2); 

  let centerY = game_gun.offset().top + (game_gun.height() / 2); 

 

  let angle = Math.atan2(cursorY - centerY, cursorX - centerX); 

  angle = angle * (180 / Math.PI); 

 

 

  game_gun.css('rotate', `${angle}deg`); 

  if (event.target.className.split(' ')[0] == 'game-duck') { 

    game_score += 1; 

  } else { 

    game_score -= 1; 

  } 

  $('.game-score span').html(game_score); 

}); 

 

$(document).on('click', '.game-duck', function () { 

  $(this).remove(); 

});  
      

       

         

       

      Счёт: 0
Код генерации уток (если понадобится)
 function get_game_ducks(amount) { 

  for (let i = 0; i < amount; i++) { 

    // создаем новый элемент img 

    let duck = $(''); 

    let width = game_ducks[0].clientWidth; 

    interval = setInterval(function () { 

      let height = game_ducks[0].clientHeight; 

 

      let x = Math.floor(Math.random() * width); 

      let y = Math.floor(Math.random() * height); 

 

      duck.css({ 

        top: y + "px", 

        left: x + "px" 

      }); 

      game_ducks.append(duck); 

    }, 1000); 

  } 

} 

get_game_ducks(10);
Также если будут советы что убрать или добавить с радостью их выслушаю, всем спасибо кто хотя бы по пытается помочь?
ИИ
Ильдар Исламов
1 458
1. Удалить это, чтобы гусь не исчезал сразу после нажатия
 $(document).on('click', '.game-duck', function () {  

  $(this).remove();  

});
2. У тебя уже есть событие окончания анимации, можно удаление гуся сделать там как и прибавление очков
 function shot(removeDuck) {  

  if (!game_gun.hasClass('shot')) {  

    game_gun.addClass('shot');  

  }  

  game_gun.on('animationend', function () {  

    game_gun.removeClass('shot');

    if (removeDuck) {

       removeDuck.remove();

    } 

  $('.game-score span').html(game_score); 

  });  

}
3. В месте, где определяешь попадание, передаёшь утку, по которой попал 
 game.click(function (event) {

  // Получаем координаты клика 

  const cursorX = event.pageX;  

  const cursorY = event.pageY;  

  

  const centerX = game_gun.offset().left + (game_gun.width() / 2);  

  const centerY = game_gun.offset().top + (game_gun.height() / 2);  

  

  let angle = Math.atan2(cursorY - centerY, cursorX - centerX);  

  angle = angle * (180 / Math.PI);  

  

  

  game_gun.css('rotate', `${angle}deg`);



  const isDuck = event.target.className.split(' ')[0] == 'game-duck';

  let duckToRemove;

  if (isDuck) {  

    game_score += 1;

    duckToRemove = $(event.target);



    const distanceToDuck = ...// здесь считай сам, заниматься математикой лень

    shooting_area.width(distanceToDuck);

  } else {  

    game_score -= 1; 

 

    const distanceToWall = ...// здесь считай сам, заниматься математикой лень 

    shooting_area.width(distanceToWall);

  }

 

  shot(duckToRemove); 

});
4. В разметке добавляешь элемент, где будет происходить анимация выстрела, когда пуля проделает путь от левого края этого элемента до правого, то анимация завершится и запустить событие, на которое ты уже подписался. Пулю меняешь с game-gun::before на shooting-area::before, чтобы пуля начинала двигаться от начала ствола, а не от приклада.

Ну, думаю, идею ты понял и оставшуюся часть работы сам сделаешь. Только сейчас у тебя одна пуля и ты не можешь выстрелить пока она не долетит, иначе код скорее всего сломается. Тут либо блочить экран, чтобы игрок не стрелял в этот момент. Либо генерировать новый game-gun при каждом выстреле и ставить visibility:hidden у картинки.
Айрат Мухаметзянов
Айрат Мухаметзянов
997
Лучший ответ
setTimeout
Э=
Элизбар =)))
6 773

Похожие вопросы