如何检测两个div是否碰到jquery？ [英] How to detect if two divs touch with jquery?

问题描述

我只是在开发一个带有两个div的简单气球游戏。问题是，当两个div彼此接触时，我无法触发一个函数。 您正在寻找边界框碰撞检测。如果你想要举办一个活动，你必须反复测试，但最好是从你的游戏循环中运行所有游戏对象的功能。沙盒位于 http://jsfiddle.net/nGRwt/7/

 函数碰撞（$ 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  b2 || r1  r2）return false; 
返回true; 
} 
  

I'm just developing a simple balloon game with two divs. The problem is that I'm unable to trigger a function when the two divs touch each other.

解决方案

You're looking for bounding box collision detection. If you want to raise an event, you have to repeatedly test, but it would be better just to run the function over all your game objects from your game loop. The sandbox is at http://jsfiddle.net/nGRwt/7/

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

这篇关于如何检测两个div是否碰到jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！