在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 DEMO：http://jsfiddle.net/ygz5wo7r/1/

我没有得到任何更多的想法如何做到这一点。您的帮助将非常感激。 TNQ。

Answer 1

尝试this

我加

return false; 

后

if (appendSize >= 3) { 
    ... 

和

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

到animateBullet()

当他们离开屏幕

Answer 2

你可以指望有多少发射子弹每一个链取出子弹，如果链达到3-5发子弹挡住了枪。然后使用超时时间可以解除对枪的阻挡。这样，你有过子弹链之间的间隔控制：

Fixed Fiddle

var bullets_chain = 0; 
var block_gun = false; 

function generateBullet() { 

    if (block_gun == false) { 
     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>"; 
     bullets_chain++; 
     if (bullets_chain >= 5) { 
      block_gun = true; 
      bullets_chain = 0; 
      setTimeout(function() { 
       block_gun = false; 
      }, 500); 
     } 
     $('#content').append(appendingValue); 
    } 
} 

function animateBullet() { 
    var bulletID = $('.bulletID'); 
    bulletID.each(function() { 
     var nowTop = $(this).offset().top; 
     if (nowTop < 0) { 
      $(this).remove(); 
     } else { 

      $(this).css("top", nowTop - 25); 
     } 
    }); 
} 

var keys = {} 
$(document).keydown(function (e) { 
    if (block_gun == false) { 
     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(); 
     } 
    } 
} 
$(document).ready(function() { 
    setInterval(shoot, 50); 
    setInterval(animateBullet, 100); 
});