JavaScript：衝突するdivsの問題

Question

私は2つのdivのためにもともと書かれたこの衝突関数を持っています。私は道路に複数の車でゲームを作ることができるようにdivを追加したい（目的は、ユーザーが衝突することなくそれを渡ることです）。問題は、1つの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);