Как столкнуть объект с препятствиями?

Question

[Galygin77]

Доброго времени суток!
Бьюсь уже несколько дней над решением текущей задачи.
Имеется блок, который движется в сторону препятствия, ( на шарик) все хорошо, в случае столкновения, происходит алерт. Но если (шарик) увернется от движущиеся угрозы, то в случае столкновения со следующей угрозой, алерт не срабатывает. Очень прошу помочь разобраться с этой ситуювиной! =(
демо моих набросок

jsfiddle.net/u6tksmwL/3
Спасибо!
P/S управлять шариком можно клавишами вверх-вниз

Answer 1

[Антон Швец]

Так вы делаете document.querySelector('i'), выбирается только первый найденный <i>

Вообще привыкайте форматировать код, там в jsfiddle сверху есть кнопочка Tidy
И не стоит мешать jquery с родными манипуляциями DOM. Для анимации хорошо бы использовать requestAnimationFrame, и делать все в одном цикле, и движение и проверку.

Comments

[Galygin77]

так точно, но чем можно заменить эту строчку, чтобы все селекторы ('i') работали как нужно.

[Антон Швец]

Galygin77, document.querySelectorAll + forEach

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

[Galygin77]

Всем спасибо за ответы, я все равно невкупился не в один из них.
Для меня это темный лес.
Поискал информацию о document.querySelectorAll + forEach и в итоге максимум что я могу сделать, это сменить цвет для всех нужных элементов(

[MamaLuyba]

Galygin77, посмотри на ютубе уроки по анимации в adobe animate - там как раз все это рассматривается.

[Антон Швец]

Galygin77, держи jsfiddle.net/melchiorio/ky39ejfg/2 Шарик можно таскать мышкой
Набросал в рамках утренней разминки на полчаса :)

[Galygin77]

Антон Швец, Спасибо! Вы гений!

Answer 2

[Galygin77]

Лучшее решение от Антон Швец

jsfiddle.net/melchiorio/ky39ejfg/2

Comments

[Антон Швец]

лучше просто мой ответ отметь как решение :)

[Galygin77]

Антон Швец, Вы мне в комментариях ответили, а там нет такой возможности, по этому я сделал так. ))

[Galygin77]

Galygin77, а делаю вот что:

Думаю догадались что это) спер идею от студии союз) все получается отлично! Шарик прыгает от микрофона, звук идет, препятствия есть.. все просто в шоколаде!

Answer 3

[skuvaWeb]

Такое лучше всего делать на canvas. Разбивайте код на модули, и откажитесь от jq, современный js не уступает ему по удобству манипуляций с DOM. Самому будет проще понять и и писать код

Вот что-то отдаленно похожее на вашу задумку