如何改进此JavaScript冲突检测？

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

我可以让collison探测正常工作，但我必须缓慢地拖动它。。。。当我移动鼠标太快时，问题就出现了。似乎刷新速度不够快，无法检测可拖动的rect

紫色方块是唯一拖拉的方块

我想我的问题是如何改进检测/修复我的问题

---

提前感谢。

由于每次像素移动都会调用

移动

，因此您没有时间进行太多计算以保持平滑。首先，我将确定重叠的you函数替换为更标准的函数：

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);
};

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

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

---

您可以在上看到结果。我不确定这是否是最好的解决方案，但它似乎很管用。

嘿，比尔，这太棒了！我厌倦了你在我提交问题之前所做的直接碰撞，但是我不知道碰撞是从哪里来的，就像你说的，它只返回真或假。谢谢你抽出时间！

  // 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});                       
  }