Jquery function will only work once, but I need to use it multiple times

Question

I have been working on a simple Frogger game as an assignment and have run into an issue with one of my functions.

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

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
      document.onkeydown = function() {
      document.getElementById('jump').play();
      }
  }
  else {
      $('#frogger').hide(); 
  }
}

I am using this to detect collisions between the first car and the frog, however I need 8 instances of this function as there are 8 lanes on my map.This is my function for the second car frogger will have to cross

// ** 2nd Lane ** //
function collision2($frogger, $car2) {
  var x1 = $frogger.offset().left; var y1 = $frogger.offset().top;
  var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true);
  var b1 = y1 + h1; var r1 = x1 + w1;
  var x2 = $car2.offset().left; var y2 = $car2.offset().top;
  var h2 = $car2.outerHeight(true); var w2 = $car2.outerWidth(true);
  var b2 = y2 + h2; var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
      console.log("false");
  }
  else {
      $('#frogger').hide(); 
  }
}

Is there a simpler way to write this function for all 8 instances? Otherwise, why is this function only running once in its first instance?

Answer 1

Something like this ?

// Put cars into an array
var cars = [$car1, $car2];

// Modify the function so that car is a function param
function collision($frogger, car) {
  var x1 = $frogger.offset().left; var y1 = $frogger.offset().top;
  var h1 = $frogger.outerHeight(true); var w1 = $frogger.outerWidth(true);
  var b1 = y1 + h1; var r1 = x1 + w1;
  var x2 = car.offset().left; var y2 = car.offset().top;
  var h2 = car.outerHeight(true); var w2 = $car.outerWidth(true);
  var b2 = y2 + h2; var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
      document.onkeydown = function() {
      document.getElementById('jump').play();
      }
  }
  else {
      $('#frogger').hide(); 
  }
}

// Run the function across all cars from array
cars.map(function(item){
    collision($frogger, item);  
});

Answer 2

I see you again.the problem of you is you want to share the code for others.you can use jQuery Deferred.then you can customize your behavior out of the function.for more details you can see $.when and $.Deferred

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

    var dfd=$.Deferred();
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
        dfd.reject();
    }
    else {
        dfd.resolve();
    }
    return dfd;
}

then,you can use the different behavior out of the collision.for example:

var hidden=function(){
    $('#frogger').hide();
};
$.when(collision($frogger,$car1)).then(hidden).fail(function(){
    document.onkeydown = function() {
        document.getElementById('jump').play();
    }
});

$.when(collision($frogger,$car2)).then(hidden).fail(function(){
    console.log("false");
});

if you process collision are all the same when hitted you can by introduce another function to share the code likes the code below:

function test($frogger, $car){
    return $.when(collision($frogger, $car)).then(function () {
        $('#frogger').hide();
    });
}
test($frogger, $car1).fail(function () {
    document.onkeydown = function () {
        document.getElementById('jump').play();
    }
});

test($frogger, $car2).fail(function () {
    console.log("false");
});

this methodology be called as Refactor ,make your code more clean & simple.