Question

我试图看看我的两个div会重叠并相互碰触。这个例子中有两个黄色的div。

为什么在div甚至不重叠或相互接触的阶段，碰撞返回true？

    var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$( document ).ready(function() {

    rotate();
});


function rotate() {
    degree++;
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

    to = setTimeout(function() {
        rotate();
    }, timer);

    $('#result').text(collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));

}

由于

Answer 1

编辑：因为您添加了一条表示您希望两个齿轮都旋转的注释，请参阅下面的两个齿轮旋转多边形检测。

只有一个齿轮旋转：我已经将你的JSFiddle分工到我认为你想要的工作here。在我认为你想要的时候，它在25％的时间里表现出“真实”的碰撞。我看到了一些我认为你想要做的事情;你的盒子计算错误。您可能想要排除边框，因此我已将代码更改为从x1，y1和x2，y2中减去它们。要排除边框，您还要使用innerWidth / innerHeight，而不是outerWidth / outerHeight。

最重要的是，您希望确保矩形不包含额外的像素，只需添加宽度或高度即可。例如，查看具有位置的3个字符的这一行：
0 1 2
a b c

第一个a（x1）位于位置0.宽度为3，但是当c（r1）显然位于位置2时，0 + 3 = 3.包括额外的像素会导致左角碰撞错了，似乎比它更早发生碰撞。像我在下面的代码中一样减1来解决这个问题：

function collision($div1, $div2) {
  var x1 = $div1.offset().left + parseInt($div1.css('borderLeftWidth'),10);
  var y1 = $div1.offset().top + parseInt($div1.css('borderTopWidth'),10);
  var h1 = $div1.innerHeight();
  var w1 = $div1.innerWidth();
  var b1 = y1 + h1 - 1;
  var r1 = x1 + w1 - 1;
  var x2 = $div2.offset().left + parseInt($div2.css('borderLeftWidth'),10);
  var y2 = $div2.offset().top + parseInt($div2.css('borderTopWidth'),10);
  var h2 = $div2.innerHeight();
  var w2 = $div2.innerWidth();
  var b2 = y2 + h2 - 1;
  var r2 = x2 + w2 - 1;

  return (r1 >= x2 && r2 >= x1 && b1 >= y2 && b2 >= y1);
}

两个齿轮都旋转：要使其工作，您需要使用旋转角部形成的多边形边进行全多边形检测。我已经在黄色区域添加了角落div，添加了用于调试的go / stop / step按钮，并使其他div半透明以使其更加明显。 JSFiddle here。两个齿轮都作为第二个示例旋转，现在它可以正确显示碰撞。多边形碰撞代码取自StackOverflow question。

Answer 2

交叉点测试代码适用于轴对齐的边界框。如果这是您要检查的内容，那么您在此处遇到的问题是您正在检查的框坐标是错误的。我不会为你解决这个问题，但我会告诉你如何轻松地调试它：

添加半透明叠加层：

<div id="bb" style="background:rgba(0,0,0,0.5); position:absolute;"></div>

看看你在比较什么：

$('#bb').offset({left:x1,top:y1}).width(w1).height(y1);

Updated JSFiddle

Answer 3

试试此演示：

删除边框和宽度更改49%至50%

demo

或其他解决方案

宽度和宽度身高变化49%至calc(50% - 1px)和top＆amp;将更改149px更改为148px

demo

Div重叠和碰撞位置

3 个答案: