Как определить столкновение объектов в js?

Question

[Вика Мармеладка]

Пытаюсь сделать игру пинг понг


Уже реализована физика шарика (шарик отскакивает от границ) и реализовано движение игрока (коричневая палочка). Главная проблема заключается в том, как теперь сделать что бы шарик отскакивал от палочки?

Мое решение: отследить X и Y позицию шарика и палочки, сравнить их значения, и если они совпадают развернуть вектор направление шарика обратно. Почему это не работает: слежка идет всего по одному пикселю каждого объекта и что бы они сравнялись позициями нужно очень сильно постараться. У кого какие решения?

Решение нужны только на ванильном Java script

Comments

[Михаил]

мне за вас все написать?

[Вика Мармеладка]

Михаил, Не обязательно писать, мне нужны идеи. Куда копать, потому что я в душе не чаю

[Михаил]

Рич Пиана, копать в гугл
circle/rectangle collision processing

[Евгений]

Мое решение: отследить X и Y позицию шарика и палочки,

У вас полочка перемещается по оси X?
Полагаю, что нет, значит вам нужно отслеживать только Y координату палочки. При определенной X координате проверяйте чтобы Y координата шарика была в диапазоне краев Y координаты палочки

Answer 1

[xenonhammer]

Допустим, что у вас палочка нахрдится в позиции y: 0px и Высота палочки 10 пикселей. Таким обраом, если в этот момент шарик находится в координате Y, которая равняется 0 до 10 , то нужно развернуть шарик

Answer 2

[RAX7]

Comments

[Вика Мармеладка]

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

[RAX7]

Рич Пиана, рисование в канвас быстрее, чем DOM, и обычно всякие игрульки делают на нем, поэтому я и использовал его.

Answer 3

[Il'ia Kartovitskii]

Ответ на этот вопрос уже давно подробно разжеван на Habr 'e