僵屍游戲-碰撞檢測問題

Question

http://designedbychristian.com/designedbychristian/u-vs-them/

那就是我正在努力的。 您可以使用箭頭鍵移動並使用空格鍵進行拍攝。 我正在Chrome中進行測試。

我正在嘗試用子彈擊中僵屍來進行碰撞檢測（紅色divs）

setInterval(function(){
   var z = $(".zombie");
   var zoff = z.offset();
   var zleft = zoff.left;

   var b = $("#bullet");
   var boff = b.offset();
   var bleft = boff.left;
      if (localStorage.getItem('facing') == "right") {
          if (bleft >= zleft) {
              $("#zombie").remove()
              $("#bullet").remove()
            }  
            }else if (localStorage.getItem('facing') == "left") {
                if (bleft <= zleft) {
                $("#zombie").remove()
                $("#bullet").remove()
            }
      }

      },1);

我的問題是子彈按照它們的生成順序將僵屍炸掉

Answer 1

這是因為使用#的選擇器只會采用具有該ID的第一個元素。 您需要做的是使用一個選擇器來查找所有的僵屍，並檢查每個僵屍是否都被擊中，然后將其刪除，而不是僅檢查第一個。

使用var z = $(".zombie"); 選擇具有zombie類的所有元素（而不是具有該ID的那些元素），然后查看以找出其余元素： https : //api.jquery.com/jQuery.each/

如果您仍然遇到問題，我可以嘗試為您發布更多代碼，但請首先嘗試;）到目前為止，這款游戲看起來非常酷。

編輯 ：好的，所以看了一下更新的代碼，出問題的是，在嘗試將整個列表與項目符號進行比較之后，您正在使用each來選擇和刪除所有僵屍。 此代碼將刪除所有僵屍，無論如何：

$('.zombie').each(function () {
    $(this).remove()
})

您真正需要做的是選擇所有僵屍， 然后使用each僵屍遍歷僵屍列表，並將每個僵屍與子彈進行一次比較，只有在發生碰撞時才將其刪除。 這樣的事情應該可以作為setInterval的內容，盡管您可能需要對其進行一些調整：

var b = $("#bullet");
var boff = b.offset();
var bleft = boff.left;
$('.zombie').each(function () {
    var z = $(this);
    var zoff = z.offset();
    var zleft = zoff.left;

    if (localStorage.getItem('facing') == "right") {
        if (bleft >= zleft) {
            z.remove()
            b.remove()
            score++
        }
    } else if (localStorage.getItem('facing') == "left") {
        if (bleft <= zleft) {
            z.remove()
            b.remove()
            score++
        }
    }
}

另外，為了優化此效果，您可能希望在循環開始時進行檢查，以查看子彈是否已經擊中了僵屍-如果是這樣，則循環將無需繼續並運行其余代碼。 不過，我將由您決定。