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++
        }
    }
}

另外，为了优化这一点，您可能需要在循环开始时进行检查以查看子弹是否已经击中了僵尸 - 如果是这样，循环将不需要继续并运行其余的码。我会留给你的。

僵尸游戏 - 碰撞检测问题

1 个答案: