Question

我一直在做一个简单的Frogger游戏作为作业，并且遇到了我的一个功能问题。

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

我用这个来检测第一辆车和青蛙之间的碰撞，但是我需要8个这个功能的实例，因为我的地图上有8个车道。这是我的第二个车贼必须穿越的功能

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

Answer 2

我再次见到你。你的问题是你想为别人分享代码。你可以使用jQuery Deferred。然后你可以自定义你的行为。你可以看到更多细节$.when和$.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;
}

然后，您可以使用碰撞中的不同行为。例如：

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

如果你在碰撞过程中碰撞都是一样的，你可以通过引入另一个函数来共享代码，如下面的代码：

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

此方法称为Refactor，使您的代码更加清晰＆amp;简单。

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

2 个答案: