javascript - 我该如何改进这个 JavaScript 碰撞检测？

Question

我有一个测试应用程序，我在其中使用 Raphael.js 创建矩形之间的碰撞检测。

我能够让碰撞检测正常工作，但我必须缓慢地拖动它....当我移动鼠标太快时会出现问题。似乎刷新速度不够快，无法检测到可拖动的矩形。

紫色方 block 是唯一拖动的方 block 。

JS Fiddle

我想我的问题是如何改进检测/解决我的问题？

提前致谢。

Answer 1

由于 move 在每个像素移动时都会被调用，因此您没有时间在计算方式上做很多事情来保持它的流畅。首先，我用更标准的函数替换了用于确定重叠的函数:

var rect_collision = function (x1, y1, size1, x2, y2, size2) {
  var a = {top: y1, bottom: y1+size1, left: x1, right: x1+size1};
  var b = {top: y2, bottom: y2+size2, left: x2, right: x2+size2};

  // this is the general way to figure out if two rects are overlapping
  return !(a.left >= b.right || a.right <= b.left ||                           
           a.top >= b.bottom || a.bottom <= b.top);
};

这只是检查一个矩形是否完全位于另一个矩形的左侧、右侧、顶部或底部。如果不是，那么它们一定是重叠的。由于这只是给出真值或假值，我仍然必须弄清楚碰撞发生在哪一侧。

为了解决这个问题，我将碰撞分为两个部分，一个是 x 碰撞，另一个是 y 碰撞，假设首先只有 dx更改后只有 dy 更改了。一旦我知道哪个方向导致了重叠，我就可以使用方向的变化来确定重叠发生在哪一侧。例如，如果 x 导致了碰撞，并且之前的 dx 大于当前的 dx，则碰撞发生在右侧。

  // check the x and y directions separately                                        
  var x_collide = rect_collision(r2_x, r2_y, rectSize, x, r1_y, rectSize);

  // see if we are currently overlapping
  if (!x_collide) {
    // not colliding, update our x position normally
    this.attr({x:x});
    this.pdx = dx;                          
  }
  else {
    // we are, stick the moving rect to the correct side of the stationary one
    // based on the drag direction that got us stuck
    this.attr({x: this.pdx > dx ? r2_x + rectSize + 1 : r2_x - rectSize - 1});                       
  }

然后我添加了一些额外的逻辑来匹配您拥有的功能，这些功能可以防止用户直接拖动矩形穿过固定的矩形。基本上我最后只是看看移动是否会将移动矩形直接放在固定矩形的另一侧，如果是这样，就阻止它。

我还清理了您的边界检查以摆脱所有 Math.min 和 Math.max 调用，因为您并不真正需要它们。不过，这更像是一种偏好，因为我怀疑这会导致很多性能问题。

您可以在 http://jsfiddle.net/X7H9G/3/ 查看结果.我不确定这是否是最佳解决方案，但它似乎可以完成这项工作。