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