Question

我使用一个小脚本来检测两个元素是否发生碰撞。

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

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

}

我的问题是我不知道如何使用带有类名'.obstacle'的所有div的函数。知道我正在调用这个函数：

collision($('#character'),$('.obstacle'));

编辑：我已经使用.each在jfiddle中进行测试，但似乎没有用。由于某种原因，只检索las元素，它总是返回true：

http://jsfiddle.net/Osaka_lime/jV9Ls/27/

像往常一样，抱歉我可怕的英语和Thanx !!!!

Answer 1

因为$ obstaculo中可能包含多个对象，所以您必须遍历集合中的所有div并检查每个div。使用jQuery，您必须执行以下操作：

function collision($yo, $obstaculo) {
   var x1 = $yo.offset().left;
   var y1 = $yo.offset().top;
   var h1 = $yo.outerHeight(true);
   var w1 = $yo.outerWidth(true);
   var b1 = y1 + h1;
   var r1 = x1 + w1;

   $obstaculo.each(function () {
      var x2 = $(this).offset().left;
      var y2 = $(this).offset().top;
      var h2 = $(this).outerHeight(true);
      var w2 = $(this).outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
   });

   return true;
}

请注意，我还没有测试过这段代码，但希望您可以将此作为示例使用，它可以让您了解下一步该怎么做。

Answer 2

我找到了一个用.each我的函数碰撞调用的解决方案：

pum = false;
      $(".obstaculo").each(function () { pum = pum || collision($('#character'), $(this), dir) });

你可以看到它在这里工作：

http://jsfiddle.net/jV9Ls/29/

晚安！

应用/使用具有多个具有相同类JQUERY的div的函数

2 个答案: