javascript - jquery为每个按键事件生成不同的id

Question

大家好，我正在尝试使用 jquery 和 jquery-collision 制作一款太空射击游戏。我快完成了，但有一个问题是，每次我按空格键射击时，它只会创建相同的 ID 和类的projectile div。因此，如果第一个射弹在空白一侧射击，而另一枚射向敌人，则击中后它们会同时消失。代码如下:

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。但我想不出任何想法。迫切需要帮助。交易。

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 保存在某处，我可能会问您为什么需要它？