Как реализовать в js функцию которая сработает когда 2 объекта столкнуться на сайте?

Question

[gasada-dev]

Изучаю js и создаю игру
У меня шарик падает вертикально вниз(сделал через js) и нужно когда он касается другого html элемента срабатывала функция в js
Всё уже реализовано(через костыли с setTimeout), кроме самой этой функции

Comments

[nonconformiste]

можете залить на codepen?

[gasada-dev]

nonconformiste, https://codepen.io/gasada-dev/pen/dyVJVrJ

[gasada-dev]

nonconformiste, код писал на scss, а в codepen вставил то что получилось в css файле, если что

[Роман]

задача очень простая, но мне лениво писать код.
Возможно вам подойдет этот API https://developer.mozilla.org/ru/docs/Web/API/Inte...

[nonconformiste]

Понял, короче код я посмотрел, его много и писать его времени особо нет, могу подсказать то что это можно сделать прослушивая координаты круга, а именно его расстояние от "волны"

var bottomY = element.offsetParent.offsetHeight - element.offsetTop - element.offsetHeight;

- так можно получить его расстояние от низа, стоит сюда еще добавить калькуляцию с учетом диаметра круга, если вопрос заключается в том что бы измерить расстояние между елементами - тут та же история с прослушиванием их позиции

[gasada-dev]

nonconformiste, Роман, спасибо за ответы, буду пробовать)

[Роман]

gasada-dev, ну в любом случае я бы такое делал на канвасе а не html блоки двигал.
А еще лучше - использовать какой либо движек для игр в броузере (phaser или pixi или cocos)
https://game.lastuniverse.ru/phaserball/