0

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();
3
  • Hola compañero, pues le digo que estoy intentando ejecutar su código aqui y no crea nada, podría comprobar que su código esté bien, para concentrarme en organizar sólo lo de la bala. Otra pregunta: ¿por qué no usa una API especializada en canvas?, se va a ahorrar mucho tiempo de trabajo. Commented el 7 nov. 2017 a las 5:03
  • codepen.io/telpro/pen/YEpyjb Aqui lo he colocado amigo. Resulta que cuando intento hacer el disparo, solo pinta el punto blanco, no sube con respecto al eje Y para que haga el efecto de que esta subiendo el disparo. Gracias por su tiempo
    – TELPRO
    Commented el 8 nov. 2017 a las 3:27
  • Bueno, inicialmente veo que los disparos no hacen nada, porque no hay función que esté modificando la posición del disparo, voy a mirar si logro organizarlo y le comparto el código. Para lo que está haciendo, le recomiendo usar una librería especial para canvas, como: P5.js o Stage.js Commented el 8 nov. 2017 a las 23:49

1 respuesta 1

0

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).

2
  • muchisimas gracias amigo. Me pondre a leer el codigo para comprenderlo mejor, ya que soy muy novato en JS. Si puedes, eliminalo de codepen, ya que me traeria problemas. Muchas gracias de nuevo!!
    – TELPRO
    Commented el 9 nov. 2017 a las 4:01
  • Listo, ya lo eliminé de mi perfil de codepen, puede dar como finalizada esta pregunta Stackoverflow Commented el 9 nov. 2017 a las 4:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.