Outro bug no meu jogo em html, css e javascript

Xispeh · 26 de julho de 2021

Olá, eu estou criando um jogo básico com HTML, CSS e JavaScript. Mas a questão é que o jogo está acontecendo um bug que eu não faço a mínima ideia de como resolver até porque sou iniciante nessa coisa de programação e não consigo ter noção do que está errado, se alguém tiver um tempo disponível para dar uma checada e me ajudar, eu agradeceria bastante. Lembrando que o jogo ainda não está pronto, está sobre criação, mas mesmo assim não consigo remover esse bug e creio que seja algo fácil, apenas sou leigo. rsr.

Bug: Não entendi muito a fonte do Bug, mas quando você dá um tiro na nave do outro lado, se ela chegar perto e atirar, não sei a origem, só sei que jogando uns 1 minuto você acha o bug com facilidade. Quando o bug ocorre a animação de explosão fica no canto superior esquerdo da tela e não some de jeito nenhum e ainda apresenta problemas um pouco a animação de explosão da nave.

dragon-defense.zip

Marcelo Calazans · 26 de julho de 2021

@Xispeh

Olá colega.

Eu acho que eu arrumei.

Testei jogando uns 5 minutos e não deu mais erro comigo. Segue abaixo o JS que eu alterei:

function start(){
    $("#inicio").hide();


    $("#fundoGame").append("<div id='jogador' class='anima1'></div>");
    $("#fundoGame").append("<div id='inimigo1' class='anima2'></div>");
    $("#fundoGame").append("<div id='inimigo2'></div>");
    $("#fundoGame").append("<div id='amigo' class='anima3'></div>");


    var wentrou_colisao2 = 0;
    var wentrou_colisao3 = 0;
    var podeAtirar=true;
    var fimdejogo=false;
    var jogo = {}
    var velocidade=4;
    var posicaoY = parseInt(Math.random() * 280);
    var TECLA = {
        W: 87,
        S: 83,
        D: 68
        
    }
    jogo.pressionou = {};
    $(document).keydown(function(e){jogo.pressionou[e.which] = true;});
    $(document).keyup(function(e){jogo.pressionou[e.which] = false;});


    jogo.timer = setInterval(loop,15);

    function loop() {
        movefundo();
        movejogador();
        moveinimigo1();
        moveinimigo2();
        moveamigo();
        colisao();
    }

    function movefundo(){
        esquerda = parseInt($("#fundoGame").css("background-position"));
        $("#fundoGame").css("background-position",esquerda-1);
    }

    function movejogador(){
        if (jogo.pressionou[TECLA.W]){
            var topo = parseInt($("#jogador").css("top"));
            $("#jogador").css("top",topo-7);}
             if (topo<=-50){
                 $("#jogador").css("top",topo+6);
             }

        if (jogo.pressionou[TECLA.S]){
            var topo = parseInt($("#jogador").css("top"));
            $("#jogador").css("top",topo+7)}
            if (topo>=390){
                $("#jogador").css("top",topo-6)
            }

        if (jogo.pressionou[TECLA.D]){
        disparo();
        }
    }

    function moveinimigo1(){
        posicaoX = parseInt($("#inimigo1").css("left"));
        $("#inimigo1").css("left",posicaoX-velocidade);
        $("#inimigo1").css("top",posicaoY);
        if (posicaoX<=0){
            posicaoY = parseInt(Math.random() * 280);
            $("#inimigo1").css("left",800);
            $("#inimigo1").css("top",posicaoY);
        }
    }

    function moveinimigo2(){
        posicaoX = parseInt($("#inimigo2").css("left"));
        $("#inimigo2").css("left",posicaoX-2);
        if (posicaoX<=0){ $("#inimigo2").css ("left", 785);}


    }

    function moveamigo(){
        posicaoX = parseInt($("#amigo").css("left"));
        $("#amigo").css("left",posicaoX+1);
        if (posicaoX>850){ $("#amigo").css("left",0);}
    }

    function disparo(){
        if (podeAtirar==true) {

            podeAtirar=false;

            topo = parseInt($("#jogador").css("top"))
            posicaoX= parseInt($("#jogador").css("left"))
            tiroX = posicaoX + 180;
            topoTiro=topo+105;
            $("#fundoGame").append("<div id='disparo' class='anima4'></div");
            $("#disparo").css("top",topoTiro);
            $("#disparo").css("left",tiroX);

            var tempoDisparo=window.setInterval(executaDisparo, 30);

            function executaDisparo(){
                posicaoX = parseInt($("#disparo").css("left"));
                $("#disparo").css("left",posicaoX+15);
                if (posicaoX>880){
                    window.clearInterval(tempoDisparo);
                    tempoDisparo=null;
                    $("#disparo").remove();
                    podeAtirar=true;
                
                }
            }
        }   
    }

    function colisao() {
        var colisao1 = ($("#jogador").collision($("#inimigo1")));
        var colisao2 = ($("#jogador").collision($("#inimigo2")));
        var colisao3 = ($("#disparo").collision($("#inimigo1")));
        var colisao4 = ($("#disparo").collision($("#inimigo2")));
        var colisao5 = ($("#jogador").collision($("#amigo")));
        var colisao6 = ($("#inimigo2").collision($("amigo")));
        
            
        if (colisao1.length>0 && wentrou_colisao3 == 0) {
                
        inimigo1X = parseInt($("#inimigo1").css("left"));
        inimigo1Y = parseInt($("#inimigo1").css("top"));
        explosao1(inimigo1X,inimigo1Y);
        
        posicaoY = parseInt(Math.random() * 280);
        $("#inimigo1").css("left",800);
        $("#inimigo1").css("top",posicaoY);
        }
        
        
        if (colisao2.length>0 && wentrou_colisao2 == 0) {
	
        inimigo2X = parseInt($("#inimigo2").css("left"));
        inimigo2Y = parseInt($("#inimigo2").css("top"));
        
        explosao2(inimigo2X,inimigo2Y);               
        $("#inimigo2").remove();            
        reposicionaInimigo2();
        wentrou_colisao2 = 1;
        }	

        
        if (colisao3.length>0  && wentrou_colisao3 == 0) {
		
		  inimigo1X = parseInt($("#inimigo1").css("left"));
        inimigo1Y = parseInt($("#inimigo1").css("top"));
                        
        explosao1(inimigo1X,inimigo1Y);
        $("#disparo").css("left",950);
                        
        posicaoY = parseInt(Math.random() * 280);
        $("#inimigo1").css("left",800);
        $("#inimigo1").css("top",posicaoY);
        wentrou_colisao3 = 1; 
           
        }
                    
        if (colisao4.length>0 && wentrou_colisao2 == 0) {
        inimigo2X = parseInt($("#inimigo2").css("left"));
        inimigo2Y = parseInt($("#inimigo2").css("top"));
        $("#inimigo2").remove();

        explosao2(inimigo2X,inimigo2Y);
        $("#disparo").css("left",950);

        reposicionaInimigo2()
        }

        if (colisao5.length>0){
            reposicionaAmigo();
            $("#amigo").remove();
        }
                       
        } //Fim da função colisao()
        
        function explosao1(inimigo1X,inimigo1Y) {
            $("#fundoGame").append("<div id='explosao1' class='anima5'></div");
            $("#explosao1").css("background-image", "url(img/explosion.png)");
            var div=$("#explosao1");
            div.css("top", inimigo1Y+20);
            div.css("left", inimigo1X+50);
            
            var tempoExplosao=window.setInterval(removeExplosao, 500);
            
                function removeExplosao() {
                    
                    div.remove();
                    window.clearInterval(tempoExplosao);
                    tempoExplosao=null;
                    wentrou_colisao3 = 0;
                    
                }
                
        } // Fim da função explosao1()

        function explosao2(inimigo2X,inimigo2Y) {
	
            $("#fundoGame").append("<div id='explosao2' class='anima6'></div");
            $("#explosao2").css("background-image", "url(img/explosion.png)");
            var div2=$("#explosao2");
            div2.css("top", inimigo2Y+15);
            div2.css("left", inimigo2X+50);
            
            var tempoExplosao2=window.setInterval(removeExplosao2, 500);
            
                function removeExplosao2() {
                    
                    div2.remove();
                    window.clearInterval(tempoExplosao2);
                    tempoExplosao2=null;
                    wentrou_colisao2 = 0;
                    
                }    
            }

            function reposicionaInimigo2() {
	
                var tempoColisao4=window.setInterval(reposiciona4, 5000);
                    
                    function reposiciona4() {
                    window.clearInterval(tempoColisao4);
                    tempoColisao4=null;
                        
                        if (fimdejogo==false) {
                        
                        $("#fundoGame").append("<div id=inimigo2></div");
                        
                        }
                        
                    }	
                }	

        function reposicionaAmigo(){
            var tempoAmigo=window.setInterval(reposiciona6, 6000);

            function reposiciona6(){
                window.clearInterval(tempoAmigo);
                tempoAmigo=null;

                if (fimdejogo==false){
                    $("#fundoGame").append("<div id='amigo' class='anima3'></div>")
                }
            }
        }        
            
                 
            


}

Eu percebi que estava entrando no IF da colisão duas vezes em alguns momentos. Então eu coloquei duas variáveis a mais para controlar.

Teste para ver se funciona.

Pode ser que tenha uma forma melhor de fazer isso, mas parece que o erro sumiu aqui nos meus testes.

Abraços e espero ter ajudado.

Xispeh · 27 de julho de 2021

Marcelo, muito obrigado mesmo você me ajudou bastante mesmo, obrigado realmente. Não querendo ser chato, mas eu também descobrir que quando você atira com o dragão na nave com o dragão muito perto da nave, o disparo destroí a nave mas ele continua na tela, sendo que quando o disparo abate a nave era pra ele sumir, assim como funciona de longe, mas percebi que de perto acontece esse bugzinho.

E marcelo vei, muito obrigado mesmo, só de já ter corrigido esse bug da explosão já me ajudou demais.

Xispeh · 27 de julho de 2021

Olá, conforme eu fui desenvolvendo o jogo, aquele bug novamente voltou, caso se disponha a me ajudar, eu agradeço.
https://www.mediafire.com/file/h5184py16iwff55/dragon-defense.zip/file

Marcelo Calazans · 27 de julho de 2021

5 horas atrás, Xispeh disse:

Marcelo, muito obrigado mesmo você me ajudou bastante mesmo, obrigado realmente. Não querendo ser chato, mas eu também descobrir que quando você atira com o dragão na nave com o dragão muito perto da nave, o disparo destroí a nave mas ele continua na tela, sendo que quando o disparo abate a nave era pra ele sumir, assim como funciona de longe, mas percebi que de perto acontece esse bugzinho.

E marcelo vei, muito obrigado mesmo, só de já ter corrigido esse bug da explosão já me ajudou demais.

Quando eu testei, eu não percebi que esse erro estava dando também quando a nave estava muito perto do dragão, como você citou agora.

Como você fez novas mudanças e aumentou a velocidade do jogo, agora isso apareceu para mim também.

Fiz novas alterações:

function start(){
    $("#inicio").hide();


    $("#fundoGame").append("<div id='jogador' class='anima1'></div>");
    $("#fundoGame").append("<div id='inimigo1' class='anima2'></div>");
    $("#fundoGame").append("<div id='inimigo2'></div>");
    $("#fundoGame").append("<div id='amigo' class='anima3'></div>");
    $("#fundoGame").append("<div id='placar'></div>");
    $("#fundoGame").append("<div id='energia'></div>");


    var wentrou_colisao2 = 0;
    var wentrou_colisao3 = 0;
    var podeAtirar=true;
    var fimdejogo=false;
    var pontos=0;
    var salvos=0;
    var perdidos=0;
    var energiaAtual=3;
    var jogo = {}
    var velocidade=4;
    var posicaoY = parseInt(Math.random() * 280);
    var TECLA = {
        W: 87,
        S: 83,
        D: 68
        
    }
    jogo.pressionou = {};
    $(document).keydown(function(e){jogo.pressionou[e.which] = true;});
    $(document).keyup(function(e){jogo.pressionou[e.which] = false;});


    jogo.timer = setInterval(loop,15);

    function loop() {
        movefundo();
        movejogador();
        moveinimigo1();
        moveinimigo2();
        moveamigo();
        colisao();
        placar();
        energia();
    }

    function movefundo(){
        esquerda = parseInt($("#fundoGame").css("background-position"));
        $("#fundoGame").css("background-position",esquerda-1);
    }

    function movejogador(){
        if (jogo.pressionou[TECLA.W]){
            var topo = parseInt($("#jogador").css("top"));
            $("#jogador").css("top",topo-7);}
             if (topo<=-50){
                 $("#jogador").css("top",topo+6);
             }

        if (jogo.pressionou[TECLA.S]){
            var topo = parseInt($("#jogador").css("top"));
            $("#jogador").css("top",topo+7)}
            if (topo>=390){
                $("#jogador").css("top",topo-6)
            }

        if (jogo.pressionou[TECLA.D]){
        disparo();
        }
    }

    function moveinimigo1(){
        posicaoX = parseInt($("#inimigo1").css("left"));
        $("#inimigo1").css("left",posicaoX-velocidade);
        $("#inimigo1").css("top",posicaoY);
        if (posicaoX<=0){
            posicaoY = parseInt(Math.random() * 280);
            $("#inimigo1").css("left",800);
            $("#inimigo1").css("top",posicaoY);
        }
    }

    function moveinimigo2(){
        posicaoX = parseInt($("#inimigo2").css("left"));
        $("#inimigo2").css("left",posicaoX-2);
        if (posicaoX<=0){ $("#inimigo2").css ("left", 785);}


    }

    function moveamigo(){
        posicaoX = parseInt($("#amigo").css("left"));
        $("#amigo").css("left",posicaoX+1);
        if (posicaoX>850){ $("#amigo").css("left",0);}
    }

    function disparo(){
        if (podeAtirar==true) {

            podeAtirar=false;

            topo = parseInt($("#jogador").css("top"))
            posicaoX= parseInt($("#jogador").css("left"))
            tiroX = posicaoX + 180;
            topoTiro=topo+105;
            $("#fundoGame").append("<div id='disparo' class='anima4'></div");
            $("#disparo").css("top",topoTiro);
            $("#disparo").css("left",tiroX);

            var tempoDisparo=window.setInterval(executaDisparo, 30);

            function executaDisparo(){
                posicaoX = parseInt($("#disparo").css("left"));
                $("#disparo").css("left",posicaoX+15);
                if (posicaoX>880){
                    window.clearInterval(tempoDisparo);
                    tempoDisparo=null;
                    $("#disparo").remove();
                    podeAtirar=true;
                
                }
            }
        }   
    }

    function colisao() {
        var colisao1 = ($("#jogador").collision($("#inimigo1")));
        var colisao2 = ($("#jogador").collision($("#inimigo2")));
        var colisao3 = ($("#disparo").collision($("#inimigo1")));
        var colisao4 = ($("#disparo").collision($("#inimigo2")));
        var colisao5 = ($("#jogador").collision($("#amigo")));
        var colisao6 = ($("#inimigo2").collision($("#amigo")));
        
            
        if (colisao1.length>0 && wentrou_colisao3 == 0) {
        energiaAtual--;      
        inimigo1X = parseInt($("#inimigo1").css("left"));
        inimigo1Y = parseInt($("#inimigo1").css("top"));
        explosao1(inimigo1X,inimigo1Y);
        
        posicaoY = parseInt(Math.random() * 280);
        $("#inimigo1").css("left",800);
        $("#inimigo1").css("top",posicaoY);
        wentrou_colisao3 = 1;
        }
        
        
        if (colisao2.length>0 && wentrou_colisao2 == 0) {
	    energiaAtual--;
        inimigo2X = parseInt($("#inimigo2").css("left"));
        inimigo2Y = parseInt($("#inimigo2").css("top"));
        
        explosao2(inimigo2X,inimigo2Y);               
        $("#inimigo2").remove();            
        reposicionaInimigo2();
        wentrou_colisao2 = 1;
        }	

        
        if (colisao3.length>0  && wentrou_colisao3 == 0) {
		
        velocidade=velocidade+0.2;
        pontos=pontos+10;
		  inimigo1X = parseInt($("#inimigo1").css("left"));
        inimigo1Y = parseInt($("#inimigo1").css("top"));
                        
        explosao1(inimigo1X,inimigo1Y);
        $("#disparo").css("left",950);
                        
        posicaoY = parseInt(Math.random() * 280);
        $("#inimigo1").css("left",800);
        $("#inimigo1").css("top",posicaoY);
        wentrou_colisao3 = 1; 
           
        }
                    
        if (colisao4.length>0 && wentrou_colisao2 == 0) {
        pontos=pontos+5;
        inimigo2X = parseInt($("#inimigo2").css("left"));
        inimigo2Y = parseInt($("#inimigo2").css("top"));
        $("#inimigo2").remove();

        explosao2(inimigo2X,inimigo2Y);
        $("#disparo").css("left",950);

        reposicionaInimigo2()
        wentrou_colisao2 = 1;
        }

        if (colisao5.length>0){
            salvos++;
            reposicionaAmigo();
            $("#amigo").remove();
        }

        if (colisao6.length>0) {
            perdidos++;
            amigoX = parseInt($("#amigo").css("left"));
            amigoY = parseInt($("#amigo").css("top"));
            explosao3(amigoX,amigoY);
            $("#amigo").remove();
                    
            reposicionaAmigo();
                    
            }
            
            
        } //Fim da função colisao()
        
        function explosao1(inimigo1X,inimigo1Y) {
            $("#fundoGame").append("<div id='explosao1' class='anima5'></div");
            $("#explosao1").css("background-image", "url(img/explosion.png)");
            var div=$("#explosao1");
            div.css("top", inimigo1Y+20);
            div.css("left", inimigo1X+50);
            
            var tempoExplosao=window.setInterval(removeExplosao, 500);
            
                function removeExplosao() {
                    
                    div.remove();
                    window.clearInterval(tempoExplosao);
                    tempoExplosao=null;
                    wentrou_colisao3 = 0;
                    
                }
                
        } // Fim da função explosao1()

        function explosao2(inimigo2X,inimigo2Y) {
	
            $("#fundoGame").append("<div id='explosao2' class='anima6'></div");
            $("#explosao2").css("background-image", "url(img/explosion.png)");
            var div2=$("#explosao2");
            div2.css("top", inimigo2Y+15);
            div2.css("left", inimigo2X+50);
            
            var tempoExplosao2=window.setInterval(removeExplosao2, 500);
            
                function removeExplosao2() {
                    
                    div2.remove();
                    window.clearInterval(tempoExplosao2);
                    tempoExplosao2=null;
                    wentrou_colisao2 = 0;
                    
                }    
            }

            function explosao3(amigoX,amigoY) {

                $("#fundoGame").append("<div id='explosao3' class='anima7'></div");
                $("#explosao3").css("top",amigoY);
                $("#explosao3").css("left",amigoX);
                var tempoExplosao3=window.setInterval(resetaExplosao3, 500);
                function resetaExplosao3() {
                $("#explosao3").remove();
                window.clearInterval(tempoExplosao3);
                tempoExplosao3=null;
                    
            }
        }

            function reposicionaInimigo2() {
	
                var tempoColisao4=window.setInterval(reposiciona4, 5000);
                    
                    function reposiciona4() {
                    window.clearInterval(tempoColisao4);
                    tempoColisao4=null;
                        
                        if (fimdejogo==false) {
                        
                        $("#fundoGame").append("<div id=inimigo2></div");
                        
                        }
                        
                    }	
                }	

        function reposicionaAmigo(){
            var tempoAmigo=window.setInterval(reposiciona6, 6000);

            function reposiciona6(){
                window.clearInterval(tempoAmigo);
                tempoAmigo=null;

                if (fimdejogo==false){
                    $("#fundoGame").append("<div id='amigo' class='anima3'></div>")
                }
            }
        }        
    
        function placar() {
        $("#placar").html("<h2> Pontos: " + pontos + "\nSalvos: " + salvos + "\nPerdidos: " + perdidos + "</h2>");
        }        

        function energia(){
            if (energiaAtual==3){
                $("#energia").css("background-image", "url(img/energia3.png");
            }
            if (energiaAtual==2){
                $("#energia").css("background-image", "url(img/energia2.png");
            }
            if (energiaAtual==1){
                $("#energia").css("background-image", "url(img/energia1.png");
            }
            if (energiaAtual==0){
                $("#energia").css("background-image", "url(img/energia0.png");
            }

        }
            


}

Testei aqui e parece estar funcionando, mesmo com a nave perto do dragão.

Mas em algo assim, é normal aparecerem bugs ao longo do caminho enquanto testamos e desenvolvemos algo. Creio que outros bugs irão aparecer também com o tempo, a medida que as pessoas forem jogando o seu jogo; é um processo normal esse.

Seu jogo está ficando muito legal amigo. Parabéns pela iniciativa.

Abraços.