jQuery collision detection during animation [closed]

Answer 1

You can try jquery-collision. Full disclosure: I just wrote and released this. I also ran into this same issue, didn't see a solution, so I wrote it myself.

It allows you to do:

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

and it will return the "#center"'s that overlap with "#me". (Or none.)

Answer 2

I don't think there is a special jQuery method for this. But you can play with math a little bit. Given the user's point, you can compute the linear function f that passes through x0,y0 (origin) and x1,y1 (destination). Then, you can use it to calculate the y for the x values that correspond to xL - the left border of the white box and xR - the right border of the white box. A collision will occur if f(xL) is between {the bottom border of the white box} - {the side of the black box / 2} and {the top border of the white box} + {the side of the black box / 2} around each of xL and xR.

If you get a collision, you can chain 5 jQuery animations - one that goes till the closest point of the white box, then one that goes 90 degrees right (estimate how much it needs to go), then 90 degrees left, then 90 degrees left again, and then 90 degrees right. This will practically pass the white box without touching it.

Answer 3

From this SO question : Collidable Draggables jQuery plugin. You can get some ideas off it, even if it's not directly usable.