Как отследить момент столкновения?

Question

[Ignatiy2]

Есть два анимированных блока. Они могут быть анимированы как с помощью setInterval(), так и с помощью requestAnimationFrame().

Требуется отследить их столкновение и вывести сообщение с помощью alert(). Вывести его нужно один раз.

Но если вставить условие в setInterval() или requestAnimationFrame(), то при сталкновении сообщение будет выводиться, пока один блок не выйдет из зоны другого. В условии используется вместо == неравенство >= или <=.

Как сделать так, чтобы сообщение вывелось лишь 1 раз?

Answer 1

[Сергей Соколов]

Требуется отследить изменение состояния столкновения в сравнении с предыдущим шагом.

Запоминайте где-то "текущее" состояние

var isCollided = false; // изначально нет столкновения

На каждой итерации – будь то по setInterval() или requestAnimationFrame() – проверяйте, есть ли столкновение сейчас. И сравнивайте с предыдущим.

const isNowCollided = checkIfCollided(); // как-то проверяем, есть ли сейчас наложение
if (isNowCollided && !isCollided) { // впервые столкнулись!
  // alert! alert!
} else if (!isNowCollided && isCollided) { // выехали из зоны
  // всем неинтересно
} else {
  // вообще без новостей
}

isCollided = isNowCollided;

Answer 2

[Денис Грибанов]

Слишком мало входных данных для релевантного ответа, да и подсказать тут мало что можно, нужно решать задачу.
Вот тут, например, описывались коллизии на js https://habr.com/ru/post/128438/.

Answer 3

[Stalker_RED]

Вот отличная вводная статья с подробностями:
https://www.ibm.com/developerworks/ru/library/wa-h...

Если все слишком сложно и непонятно - выбери готовый 2д движок.