动画期间的jQuery碰撞检测

Question

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

如何使用jquery执行此操作？

Answer 1

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

它允许你这样做：

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

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

Answer 2

我认为没有特殊的jQuery方法。 但是你可以玩一点数学。根据用户的观点，您可以计算通过f（原点）和x0,y0（目的地）的线性函数x1,y1。然后，您可以使用它来计算与y相对应的x值的xL - 白框的左边框和xR - 右边框的白盒子。如果f(xL)介于xL和xR各周围{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}之间，则会发生冲突。

如果你发生了碰撞，你可以链接5个jQuery动画 - 一个直到白盒最近点，然后一个向右90度（估计它需要走多少），然后90度，然后再向左90度，然后向右90度。这实际上会通过白盒而不会碰到它。

Answer 3

来自this SO question：Collidable Draggables jQuery plugin。你可以从中获得一些想法，即使它不能直接使用。