javascript - Jquery函数只能工作一次，但我需要多次使用它

Question

我一直在开发一个简单的 Frog 游戏作为作业，但我的一个函数遇到了问题。

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

我用它来检测第一辆车和 Frog 之间的碰撞，但是我需要这个函数的 8 个实例，因为我的 map 上有 8 条车道。这是我的第二辆车 Frog 必须穿越的函数

// ** 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(); 
  }
}

是否有更简单的方法为所有 8 个实例编写此函数？否则，为什么这个函数在第一个实例中只运行一次？

Answer 1

类似这样的事情吗？

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