动画期间的jQuery碰撞检测

我想让黑匣子检测它是否会在有边框上碰撞。 如果黑匣子检测到碰撞，它将四处移动并转到用户点击的位置。

如何用jquery做到这一点？

Answer 1

你可以尝试jquery-collision 。 完全披露：我刚刚写了并发布了这个。 我也遇到了同样的问题，没有看到解决方案，所以我自己写了。

它允许你做：

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

它将返回与“#me”重叠的“#center”。 （或者没有。）

Answer 2

我不认为有一个特殊的jQuery方法。 但是你可以玩一点数学。 根据用户的观点，您可以计算通过x0,y0 （原点）和x1,y1 （目标）的线性函数f 。 然后，您可以使用它来计算与xL对应的x值的y – 白色框的左边框和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} {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

从这个SO问题 ： Collidable Draggables jQuery插件 。 你可以从中获得一些想法，即使它不能直接使用。