javascript - 在 jQuery 中一次生成多个 div

Question

我正在尝试使用 jquery 制作一个游戏，其中使用函数附加元素符号。到目前为止，每当我按下空格键时都会生成子弹，但我想生成 3-5 堆子弹。将生成 3-5 颗子弹，然后短暂休息，然后再次生成 3-5 颗子弹，然后该过程继续。元素符号附加为 div 元素。这是代码，

function generateBullet() {
var Player = $('#player');
var PlayerLeft = Player.offset().left;
var PlayerTop = Player.offset().top - 50;
var appendingValue = "<div class='bulletID' style=' position: absolute; left: 250px; top: 250px;'></div>";
var appendSize = $('.bulletID').size();
if (appendSize >= 3) {
    $('#content').delay(5000).append(appendingValue);
} else {
    $('#content').append(appendingValue);
 }
}

function animateBullet() {
var bulletID = $('.bulletID');
bulletID.each(function () {
    var nowTop = $(this).offset().top;
    $(this).css("top", nowTop - 25);
 });
}

var keys = {}
$(document).keydown(function (e) {
keys[e.keyCode] = true;
});

$(document).keyup(function (e) {
delete keys[e.keyCode];
});

function shoot() {
var Player = $('#player');
for (var direction in keys) {
    if (!keys.hasOwnProperty(direction)) continue;
    if (direction == 32) {
        generateBullet();
    }
 }
}

JSFIDDLE 演示:http://jsfiddle.net/ygz5wo7r/1/

我不知道该怎么做。非常感谢您的帮助。 TnQ.

Answer 1

尝试 this

我加了

return false;

之后

if (appendSize >= 3) {
  ...

和

parseInt($(this).css("top"))< 0 && $(this).remove();

到 animateBullet()

当子弹离开屏幕时移除子弹