JavaScript：碰撞divs问题

Question

我有这个碰撞函数最初是为两个div编写的。我想添加更多的div，因此我可以在道路上创建一个包含多辆汽车的游戏（目标是让用户在不碰撞的情况下跨越它）。问题是我不明白为什么只有一个div触发方法，而不是两者。我不知道问题是否在if语句中。

的JavaScript：

$(document).ready(function() { 
    $(document).on('keydown', function(e) { 
    var keycode = e.keyCode; 
    var frog = $(".frog"); 
    e.preventDefault(); 

    if (keycode === 37) frog.css("left", (frog.position().left - 4) + "px"); 
    if (keycode === 38) frog.css("top", (frog.position().top - 4) + "px"); 
    if (keycode === 39) frog.css("left", (frog.position().left + 4) + "px"); 
    if (keycode === 40) frog.css("top", (frog.position().top + 4) + "px"); 
    }); 
}); 

    function collision($car, $secondCar, $frog) { 

     var x1 = $car.offset().left; 
     var y1 = $car.offset().top; 
     var h1 = $car.outerHeight(); 
     var w1 = $car.outerWidth(); 

     var b1 = y1 + h1; 
     var r1 = x1 + w1; 

    //SECOND CAR 

     var x3 = $secondCar.offset().left; 
     var y3 = $secondCar.offset().top; 
     var h3 = $secondCar.outerHeight(); 
     var w3 = $secondCar.outerWidth(); 

     var b3 = y3 + h3; 
     var r3 = x3 + w3; 

     var x2 = $frog.offset().left; 
     var y2 = $frog.offset().top; 
     var h2 = $frog.outerHeight(); 
     var w2 = $frog.outerWidth(); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 



     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2 || 
b3 < y2 || y3 > b2 || r3 < x2 || x3 > r2) { 

      return false; 

     }else { 

      $frog.fadeOut(); 
     } 

    } 

window.setInterval(function() { 
    (collision($('#car'), $('#secondCar'), $('#frog'))); 
}, 0); 

编辑：

如果我有这样的：

if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
      return false; 
     }else { 
      $frog.fadeOut(); 
     } 

它工作的第一辆车。但有两辆车没有任何反应的参数...

或者，即使这样写，它的工作原理，但它的重复代码...

function collision($car, $frog) { 

     var x1 = $car.offset().left; 
     var y1 = $car.offset().top; 
     var h1 = $car.outerHeight(); 
     var w1 = $car.outerWidth(); 

     var b1 = y1 + h1; 
     var r1 = x1 + w1; 

     var x2 = $frog.offset().left; 
     var y2 = $frog.offset().top; 
     var h2 = $frog.outerHeight(); 
     var w2 = $frog.outerWidth(); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2 ) { 

      return true; 

     }else { 

      $frog.fadeOut(); 
     } 

    } 

function secondCollision($secondCar, $frog){ 
    var x3 = $secondCar.offset().left; 
     var y3 = $secondCar.offset().top; 
     var h3 = $secondCar.outerHeight(); 
     var w3 = $secondCar.outerWidth(); 

     var b3 = y3 + h3; 
     var r3 = x3 + w3; 

     var x2 = $frog.offset().left; 
     var y2 = $frog.offset().top; 
     var h2 = $frog.outerHeight(); 
     var w2 = $frog.outerWidth(); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

    if (b3 < y2 || y3 > b2 || r3 < x2 || x3 > r2) { 

      return true; 

     }else { 

      $frog.fadeOut(); 
     } 

} 


window.setInterval(function() { 
    (collision($('#car'), $('#frog'))); 

}, 0); 
window.setInterval(function() { 
    (secondCollision($('#secondCar'), $('#frog'))); 

}, 0); 

小提琴： https://jsfiddle.net/icenine/w3advz9u/

Answer 1

的实际上，解决方案非常简单。每次添加一个新的div时，只需要调用collision函数，并将它的ID作为参数传递。整个脚本：

$(document).ready(function() { 
    $(document).on('keydown', function(e) { 
    var keycode = e.keyCode; 
    var frog = $(".frog"); 
    e.preventDefault(); 

    if (keycode === 37) frog.css("left", (frog.position().left - 4) + "px"); 
    if (keycode === 38) frog.css("top", (frog.position().top - 4) + "px"); 
    if (keycode === 39) frog.css("left", (frog.position().left + 4) + "px"); 
    if (keycode === 40) frog.css("top", (frog.position().top + 4) + "px"); 
    }); 
}); 

    function collision($car, $frog) { 

     var x1 = $car.offset().left; 
     var y1 = $car.offset().top; 
     var h1 = $car.outerHeight(); 
     var w1 = $car.outerWidth(); 

     var b1 = y1 + h1; 
     var r1 = x1 + w1; 

     var x2 = $frog.offset().left; 
     var y2 = $frog.offset().top; 
     var h2 = $frog.outerHeight(); 
     var w2 = $frog.outerWidth(); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 



     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 

      return false; 

     }else { 

      $frog.fadeOut(); 
     } 

    } 

window.setInterval(function() { 
    (collision($('#car'), $('#frog'))); 
}, 0); 
window.setInterval(function() { //-> the second call, now for second car 
    (collision($('#secondCar'), $('#frog'))); 
}, 0);