在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); 
});