Buenas noches a la comunidad, he estado programando, o bueno, intentando programar un juego en canvas. Aun no se la tematica a colocarle, pero, si se las funciones que me gustaria que cumpliera. Por ahora, el diseno es de puros rectangulos, luego, le ire agregando imagenes. Cabe resaltar que soy novato en JS. El juego debe ser desarrollado en JS puro, sin uso de librerias externas.
El problema radica que, ya he conseguido que mi rectangulo se mueva con respecto al eje X cuando pulso las flechas del teclado, pero estoy intentando codificar la parte de los disparos que deberia realizar cuando una tecla (en mi caso, la espaciadora) se pulse.
Aqui el codigo, no se que tengo malo, no se por que no se me dibujan las "balas" o disparos, gracias!
Mi deseo es que, al pulsar la tecla espaciadora, o xs tecla, se dispare. Pero no lo he logrado, no se por que no me lo pinta. Gracias por su tiempo, saludos.
var canvas = document.getElementById('canvasjuego');
ctx = canvas.getContext("2d");
var background;
var backgroundAnchura;
var backgroundAltura;
var vidas = 3;
var lifes = 'VIDAS: 3';
var ramdonPosX1=500;
var ramdonPosY1=80;
var contador = 3;
var disparoscontador=0;
var intervaloCanon;
var intervaloDisparos;
var canonJson={
//atributos del canon
posX: 400,
posY: 40,
width: 50,
height: 50
}
var balas={
//atributos de la bala en movimiento
posX: canonJson.posX+25,
posY: canonJson.posY-10,
width: 15,
height: 15
}
var evento={}
var arrayDisparos=[];
function funcionBackground(){
background = new Image();
background.src='background2.png';
background.onload = function(){
ctx.fillStyle='white';
ctx.font="20px Arial";
ctx.fillText(lifes,20,20);
intervaloCanon = window.setInterval(cargarEnMarco,1000/55);
}
}
function aviones(){
var ramdonPosX=Math.floor((Math.random()*650)+0);
var ramdonPosY=Math.floor((Math.random()*200)+20);
ctx.fillStyle='white';
ctx.beginPath();
ctx.fillRect(ramdonPosX,ramdonPosY,10,10); //x desde 150 hasta 650 //y desde 5 hasta 100
ctx.closePath();
if(ramdonPosX1==canonJson.posX||ramdonPosY1==canonJson.posY){
alert('tienes una vida menos');
}
disparoscontador++;
if(disparoscontador>100){
//clearInterval(intervaloCanon);
alert("yaas");
}
}
function moverDisparos(){
for(var i=0;i<arrayDisparos;i++){
balaActual=arrayDisparos[i];
balas.posY=bala.posY-5;
}
//arrayDisparos=arrayDisparos.filter();
}
function disparosCanon(){
arrayDisparos.push(balas);
}
function disparosFinales(){
ctx.fillStyle='white';
for(var i=0;i<arrayDisparos;i++){
var privatedisparo = arrayDisparos[i];
ctx.fillRect(balas.posX,balas.posY,balas.width,balas.height);
}
}
function disparosEjecutar(){
if(evento[32]){
disparosFinales();
}
}
function cargarEnMarco(){
//aviones();
canon();
//disparosFinales();
}
function keyboardEvents(){
agregarEventos(document,"keydown", function(e){
evento[e.keyCode] = true; //tecla presionada en TRUE
});
agregarEventos(document,"keyup", function(e){
evento[e.keyCode] = false; //tecla que dejo de ser presionada en false
});
}
function agregarEventos(elementoDelEvento, nombreEvento, funcionAEjecutar){
if(elementoDelEvento.addEventListener){
elementoDelEvento.addEventListener(nombreEvento, funcionAEjecutar, false);
}
}
function canon(){
if(evento[37]){
canonJson.posX-=4;
if(canonJson.posX<0){
canonJson.posX=10; //para que no se salga del canvas
}
}
if(evento[39]){ //movimiento a la derecha
canonJson.posX+=4;
if(canonJson.posX>750){
canonJson.posX=740;
}
} else {
disparosEjecutar();
}
ctx.clearRect(canonJson.width-50,canonJson.height-5,canvas.width,canvas.height);
ctx.fillStyle='red';
ctx.fillRect(canonJson.posX,350,canonJson.width,canonJson.height);
}
function pruebaVidas(){
vidas--;
//prueba tambien de avion enemigo\
ctx.clearRect(ramdonPosX1,ramdonPosY1,10,10);
ramdonPosX1=ramdonPosX1-20;
ramdonPosY1=ramdonPosY1+60;
//fin prueba avion enemigo
if(vidas==2){
ctx.fillStyle='black';
ctx.fillText(lifes,20,20);
ctx.fillStyle='white';
ctx.font="20px Arial";
ctx.fillText("VIDAS: "+vidas,20,20);
} else if (vidas==1){
ctx.fillStyle='black';
ctx.fillText(lifes,20,20);
ctx.fillStyle='white';
ctx.font="20px Arial";
ctx.fillText("VIDAS: "+vidas,20,20);
} else if (vidas==0){
ctx.fillStyle='black';
ctx.fillText(lifes,20,20);
ctx.fillStyle='white';
ctx.font="20px Arial";
ctx.fillText("HAZ PERDIDO D':",20,20);
}
}
keyboardEvents();
funcionBackground();
//aviones();
//canon();