jQuery обнаружение столкновения во время анимации

Question

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

Как это сделать с помощью jquery?

Answer 1

Вы можете попробовать jquery-collision. Полное раскрытие: я только что написал и выпустил это. Я также столкнулся с этой проблемой, не видел решения, поэтому сам написал.

Это позволяет сделать:

var hit_list = $("#me").collision("#center"); 

и он будет возвращать "#center" 'S, которые перекрываются с "#me". (Или нет.)

Answer 2

Я не думаю, что для этого есть специальный метод jQuery. Но вы можете немного поиграть с математикой. С учетом точки пользователя вы можете вычислить линейную функцию f, которая проходит через x0,y0 (происхождение) и x1,y1 (пункт назначения). Затем вы можете использовать его для расчета y для значений x, которые соответствуют xL - левая граница белого квадрата и xR - правая граница белого квадрата. Столкновение произойдет, если f(xL) находится между {the bottom border of the white box} - {the side of the black box/2} и {the top border of the white box} + {the side of the black box/2} вокруг каждого из xL и xR.

Если у вас есть столкновение, вы можете связать 5 анимаций jQuery - один, который идет до ближайшей точки белого квадрата, затем тот, который идет на 90 градусов вправо (оцените, сколько ему нужно идти), затем на 90 градусов влево , затем снова 90 градусов, а затем на 90 градусов вправо. Это практически пропускает белый ящик, не касаясь его.

Answer 3

От this SO question: Collidable Draggables jQuery plugin. Вы можете получить от него некоторые идеи, даже если они не могут использоваться напрямую.