Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Jogo de tiro, não sei onde errei.

Tentei fazer um joguinho diferente com os conhecimento até agora, utilizando as setas para jogar, mas depois de umas 5 horas acabei desistindo... Não consegui fazer o movimento da "nave", apesar de redesenhar a tela toda, a cada vez, parece que o desenho da nave não apaga... não consegui saber o está errado, pois na função de redesenhar a tela, eu a principio apago tudo e redesenho a tela toda, e só depois chamo a função da nave... era pras "naves" anteriores sumirem atras da tela cinza... Frustrei... haha, até tentei acertar o timing da bala, tentando fazer uma função para o tiro em si (para guardar a posição X do momento do tiro) e depois ia fazer outra para verificar se o tiro acertou o alvo, mas acabei desistindo antes... hehe.Se alguém puder me ajudar pra ver onde errei ali na nave, agradeço.

botei ele online se alguém quiser ver funcionado https://abel83.000webhostapp.com/joguin.html

<meta charset="UTF-8">
<center>
<canvas id="mytela" width="810" height="610"></canvas>


<script>
    var tela = document.getElementById('mytela');
    var pincel = tela.getContext('2d');
    var xnave = 400
    var xalvo = 300
    var diralvo = true
    var xtiro = 395
    var ytiro1 = 500
    var ytiro2 = 100
    var ybarra = 595

    function fps() {
    console.log("xnave " + xnave);
    faztela()
    fazalvo()
    fazbarra()
    faztiro()
    faznave()
    }

    function faztela() {
    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 800, 600);
    pincel.fillStyle = 'gray';
    pincel.fillRect(5, 5, 790, 590);
    }

    function faznave() {

    pincel.fillStyle = 'darkblue';
    pincel.moveTo(xnave-70, 595);
    pincel.lineTo(xnave-50, 565);
    pincel.lineTo(xnave-50, 545);
    pincel.lineTo(xnave-5, 525);
    pincel.lineTo(xnave-5, 515);
    pincel.lineTo(xnave+5, 515);
    pincel.lineTo(xnave+5, 525);
    pincel.lineTo(xnave+50, 545);
    pincel.lineTo(xnave+50, 565);
    pincel.lineTo(xnave+70, 595);
    pincel.fill();
    pincel.stroke();
    }

    function fazalvo() {    
    if(xalvo < 30) { diralvo = true }
    if(xalvo > 680) { diralvo = false }
    if(diralvo) { xalvo = xalvo + 30 } else { xalvo = xalvo -30}

    pincel.fillStyle = "black";
    pincel.fillRect(xalvo-2, 24, 104, 76);
    pincel.fillStyle = "darkred";
    pincel.fillRect(xalvo, 26, 100, 72);
    }

    function faztiro() {
    if(ytiro1 >= 100) {
    pincel.fillStyle = "blue"
    pincel.fillRect(xtiro, ytiro1, 10, 10)
    ytiro1 = ytiro1 - 10
    } else {
    ytiro1 = 500
    }
    }

    function veracerto() {
    xtiro = xnave - 5
    setTimeout(fazacerto, 1600)
    }
    function fazacerto() {

    }

    function fazbarra() {
    pincel.fillStyle = "black";
    pincel.fillRect(750, 390, 45, 210)
    pincel.fillStyle = "#333333"
    pincel.fillRect(755, 395, 40, 200)
    pincel.fillStyle = "red"

    if(ybarra != 395) {
    ybarra = ybarra - 10
    } else    if(ybarra = 395) {
    ybarra = 595
    }
    pincel.fillRect(755, ybarra, 40, 595-ybarra)
    faztiro()    
    }

    function leDoTeclado(evento) {
    if(evento.keyCode == 37) { 
    if(xnave > 85) { xnave = xnave - 10; }
    } else if (evento.keyCode == 39) { 
    if(xnave < 715) {xnave = xnave + 10; }
    }
    }

    document.onload = fps();
    setInterval(fps, 160)
    setInterval(veracerto, 3200)

    document.onkeydown = leDoTeclado;

</script>
3 respostas

consegui :) foi só colocar um pincel.beginPath() que ele limpou o desenho do canhão :D. Atualizei e ele já está atirando normalmente e dando um pequeno efeito quando acerta, vou tentar botar um contador de acertos :)

Abel, na sua função fps() adicione a seguinte linha:

pincel.beginPath();

Assim ele vai limpar a posição do pincel e não vai ficar desenhando a nave várias vezes.

Espero ter ajudado, Abraços.

solução!

opa, obrigado, acabei descobrindo por tentativa hahaha, ainda tenho que aprender bastante da arquitetura e estrutura da linguagem, mas vamo que vamo. Adicionei o contador de acertos, acho que tá bom pra esse exercício já :D. tá aqui o código final se alguém quiser dar uma olhada, testar, tirar dúvidas. Tentei aumentar a dificuldade (velocidade) a cada acerto, mas não consegui recomeçar o timer inicial hehe. Fica pra próxima o/

<meta charset="UTF-8">
<center>
<canvas id="mytela" width="810" height="610"></canvas>


<script>
    var tela = document.getElementById('mytela');
    var pincel = tela.getContext('2d');
    var xnave = 400
    var xalvo = 300
    var diralvo = true
    var xtiro = 395
    var rtiro = 500
    var ytiro1 = 500
    var ytiro2 = 100
    var ybarra = 595
    var acertos = 1
    var nivel = 0

    function fps() {
    console.log("xnave " + rtiro);
    faztela()
    fazalvo()
    fazbarra()
    faztiro()
    faznave()
    fazacerto()
    return false;
    }

    function faztela() {
    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 800, 600);
    pincel.fillStyle = 'gray';
    pincel.fillRect(5, 5, 790, 590);
    }

    function faznave() {

    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.moveTo(xnave-70, 595);
    pincel.lineTo(xnave-50, 565);
    pincel.lineTo(xnave-50, 545);
    pincel.lineTo(xnave-5, 525);
    pincel.lineTo(xnave-5, 515);
    pincel.lineTo(xnave+5, 515);
    pincel.lineTo(xnave+5, 525);
    pincel.lineTo(xnave+50, 545);
    pincel.lineTo(xnave+50, 565);
    pincel.lineTo(xnave+70, 595);
    pincel.fill();
    return false;
    }

    function fazalvo() {    
    if(xalvo < 30) { diralvo = true }
    if(xalvo > 680) { diralvo = false }
    if(diralvo) { xalvo = xalvo + 30 } else { xalvo = xalvo -30}

    pincel.fillStyle = "black";
    pincel.fillRect(xalvo-2, 24, 104, 76);
    pincel.fillStyle = "darkred";
    pincel.fillRect(xalvo, 26, 100, 72);
    pincel.fillStyle = "black"
    pincel.font = "50px Arial Black"
//    pincel.textAlign = "center"
    pincel.fontStyle = "black"
    pincel.fillText(acertos, xalvo+30, 80)
    }

    function faztiro() {
    if(ytiro1 >= 100) {
    pincel.fillStyle = "blue"
    pincel.beginPath()
    pincel.fillRect(xtiro, ytiro1, 10, 10)
    ytiro1 = ytiro1 - 10
    } else {
    xtiro = xnave-5
    ytiro1 = 500
    rotatiro();
    }
    }

    function rotatiro() {
        pincel.fillStyle = "black"
        pincel.fillRect(xtiro-5, ytiro1-5, 20, 20)
    }

    function fazacerto() {
    if(ytiro1 <=100) {
        if(xtiro >= xalvo && xtiro <= xalvo+96) {
        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(xtiro, 60, 50, 0, 2 * Math.PI);
        pincel.fill();
        acertos++
        nivel = nivel + 10
        clearInterval(fps);
    } }
    }

    function fazbarra() {
    pincel.fillStyle = "black";
    pincel.fillRect(750, 390, 45, 210)
    pincel.fillStyle = "#333333"
    pincel.fillRect(755, 395, 40, 200)
    pincel.fillStyle = "red"

    if(ybarra != 395) {
    ybarra = ybarra - 10
    } else    if(ybarra = 395) {
    ybarra = 595
    }
    pincel.fillRect(755, ybarra, 40, 595-ybarra)
    faztiro()    
    }

    function leDoTeclado(evento) {
    if(evento.keyCode == 37) { 
    if(xnave > 85) { xnave = xnave - 10; }
    } else if (evento.keyCode == 39) { 
    if(xnave < 715) {xnave = xnave + 10; }
    }
    }

    function comeca() { setInterval(fps, 100-nivel) }
    document.onload = comeca();


    document.onkeydown = leDoTeclado;

</script>