Finalmente logré simular el disparo, agregando el siguiente código:
var esperaDisparos=false;
var disparos=[];
var timerDisparo, timerMovimientoDisparo;
function dibujarDisparos(){
if(esperaDisparos==false){
esperaDisparos=true;
timerDisparo=setTimeout(function(){
esperaDisparos=false;
},600);// este 600 es el cargador del arma :D;
espereDisparos=true;
ctx.fillStyle='white';
ctx.save();
ctx.fillRect(canonJson.posX+16,disparosJson.posY,disparosJson.width,disparosJson.height)
disparos.push([canonJson.posX+16,disparosJson.posY,disparosJson.width,disparosJson.height]);
}
if(disparos.length==1){
console.log(disparos.length);
moverDisparos();
}
}
function moverDisparos(){
setTimeout(function(){
console.log(10);
moverDisparos();
},100); // Aquí está velocidad de la bala representada en tiempo, o también es el tiempo.
console.log(disparos.length);
for(var i=0;i<disparos.length;i++){
ctx.clearRect(disparos[i][0],disparos[i][1],disparos[i][2],disparos[i][3]+1);
disparos[i]=[disparos[i][0],disparos[i][1]-1,disparos[i][2],disparos[i][3]];// el 5 es la velociada del disparo
ctx.fillRect(disparos[i][0],disparos[i][1]+1,disparos[i][2],disparos[i][3])
}
}
La idea es que ud debe modificar la variables que ahí están quemadas en números, pues veo que el inicio tiene una variable disparosJson
que es (creo) la que va a controlar las características del disparo (eso debería se una clase y debería estar en un archivo alterno a este).
Aquí está el ejemplo funcional
¿me dice si debo eliminar el código de mi codepen o si lo puedo dejar?