Как сделать мой объект огненными пулями один за другим?

Question

Главный объект держит стрельбу, и он выглядит как лазер. Я не знаю, как заставить его выстрелить одной пулей нажатием клавиши. Нужно ли использовать интервалы?

var gameBullet=[]; 
var i=0; 
//Starts game 
function startGame() { 
    myGameArea.start(); 
    myGamePiece= new component(20,20,"red",10,120); 

} 
//Creates canvas , events and how many times per sec should the object redraw 
var myGameArea = { 
    canvas : document.createElement("canvas"), 
    start : function() { 
     this.canvas.width = 480; 
     this.canvas.height = 270; 
     this.context = this.canvas.getContext("2d"); 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
     this.interval = setInterval(updateGameArea, 1); 

     window.addEventListener('keydown', function (e) { 
      myGameArea.keys = (myGameArea.keys || []); 
      myGameArea.keys[e.keyCode] = (e.type == "keydown"); 
     }) 
     window.addEventListener('keyup', function (e) { 
      myGameArea.keys[e.keyCode] = (e.type == "keydown"); 
     }) 
     window.addEventListener('space',function(e){ 
      myGameArea.keys[e.keyCode] = (e.type == "space"); 
     }) 
    }, 
    clear: function(){ 
     this.context.clearRect(0,0,this.canvas.width,this.canvas.height); 
    } 
} 
//Bullet constructor 
function bullet(width,height,color,x,y){ 
    this.gamearea=myGameArea; 
    this.width=width; 
    this.height=height; 
    this.speedX=5; 
    this.x=x; 
    this.y=y; 
    this.update = function(){ 
     ctx=myGameArea.context; 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
    this.newPos = function(){ 
     this.x+=this.speedX; 
     this.hitBorder(); 
    } 
    this.hitBorder = function() { 
     var right = myGameArea.canvas.width - this.width; 
     if (this.x > right) { 
      this.x = right; 
     } 
    } 
} 
//Main Object constructor 
function component(width,height,color,x,y){ 
    this.gamearea=myGameArea; 
    var imageObj = new Image(); 
    this.width=width; 
    this.height=height; 
    this.speedX=0; 
    this.speedY=0; 
    this.x=x; 
    this.y=y; 
    this.update= function(){ 
     ctx=myGameArea.context; 

    /*  ctx.drawImage(imageObj,this.x,this.y, this.width, this.height); 

      imageObj.src = 'stalin.png'; 
     */ 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
    } 
    this.newPos= function(){ 
     this.x+=this.speedX; 
     this.y+=this.speedY; 
     this.hitBorder(); 
    } 
    this.hitBorder = function() { 
     var down = myGameArea.canvas.height - this.height; 
     if (this.y > down) { 
      this.y = down; 
     } 
     if (this.y < 0) { 
      this.y = 0; 
     } 
     var right = myGameArea.canvas.width - this.width; 
     if (this.x > right) { 
      this.x = right; 
     } 
     if (this.x < 0) { 
      this.x = 0; 
     } 
    } 
} 

Я думаю здесь проблема. Мне нужно что-то добавить в цикле, но я не знаю, что.

//Updates game 
function updateGameArea() { 
    myGameArea.clear(); 
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 

    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; } 
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; } 
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; } 
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; } 
    if (myGameArea.keys && myGameArea.keys[32]) 
    { 
     gameBullet[i]=new bullet(5,5,"red",myGamePiece.x,myGamePiece.y); 
     i=i+1; 
    } 

    myGamePiece.newPos(); 
    myGamePiece.update(); 
    for(i=0;i<gameBullet.length;i+=1){ 
     gameBullet[i].newPos(); 
     gameBullet[i].update(); 
    } 
} 
startGame(); 

Answer 1

вы можете использовать setinterval() вместо для петли

setinterval(yourcode,timespan);