Question

美好的一天，我正在尝试使用jquery和jquery-collision制作太空射击游戏。我差不多完成但有一个问题是，每当我按spacebar进行拍摄时，它只创建相同的ID＆amp; projectile div的类。因此，如果第一个projectile被拍到空白的一面＆amp;另一个人正朝着敌人射击，同时他们两人同时消失。以下是代码：

function spawnBullet() { 
$("#content").append($("<div />")
.attr('id', 'projectile1')
.addClass("projectile")
.css({ "left" :  $('#fighter').offset().left + 25, 'top' : $('#fighter').offset().top - 20 })); 
}

function processBullet() {
$(".projectile").each(function() {
    var maxTop = $(this).offset().top;
    var breakable = $(".projectile").collision( "#boss" );
    //console.log(maxTop);
    $(this).css("top", maxTop - 3);
    if (maxTop <= 110 || breakable.length != 0) {
      $('#projectile1').remove();
      $("#score").html(++score);
    }

    if (breakable.length != 0) {
       breakable.remove();
       sound.play();
       spawnEnemy();
     }
});
}
setInterval(processBullet, 50);

function shoot() {
$(document).keydown(function(event) {
switch (event.keyCode) {
case 32:
    spawnBullet();
    break;
}
});
}

我想为每个spawnBullet()调用创建不同的基于id的div。但我无法想出任何想法。绝望地需要帮助。 TNX。

Answer 1

您可以通过维护每次递增的全局计数器来创建唯一ID，然后将该数字附加到您要使用的任何根名称的末尾。

例如：

var idCntr = 0;

function spawnBullet() { 
    $("#content").append($("<div />")
        .attr('id', 'projectile' + idCntr++)
        .addClass("projectile")
        .css({ "left" :  $('#fighter').offset().left + 25, 'top' : $('#fighter').offset().top - 20 })); 
}

如果您不想创建新的全局变量或想要保护它不被篡改，您可以将其置于闭包中：

var spawnBullet = (function() {
    var idCntr = 0;

    return function () { 
        $("#content").append($("<div />")
            .attr('id', 'projectile' + idCntr++)
            .addClass("projectile")
            .css({ "left" :  $('#fighter').offset().left + 25, 'top' : $('#fighter').offset().top - 20 })); 
    }
})();

在其他情况下，当前时间（以毫秒为单位）作为一个足够独特的id，但如果在紧密循环中多次使用它，则必须小心，因为你可能会获得相同的时间值，但是你赢了＃如果每个用户事件使用一次，则获得相同的时间值：

        .attr('id', 'projectile' + new Date().getTime())

如果您未在某处保存此ID，我可能会问为什么您甚至需要它？

Answer 2

我不完全确定这些东西是如何工作的，这可能会有所不同。你使用

遍历每个射弹

$(".projectile").each(function() {...})

在每次迭代期间，您将使用

测试是否有任何项目符号冲突

var breakable = $(".projectile").collision( "#boss" );

仅测试正在迭代的子弹是否没有意义？

var breakable = $(this).collision( "#boss" );

然后

if (maxTop <= 110 || breakable.length != 0) {
  $(this).remove();

好处是您根本不需要ID。

jquery为每个keypress事件生成不同的id

2 个答案: