1
resposta

Problema com botões no jogo de disparo

<canvas width="600" height="400"></canvas>

<br>
<p id='acertos'><b>acertos:</b> </p>

<p id='erros'><b>erros:</b> </p>
<p>(com 5 erros o jogo acaba)</p>
<br>
<p>Dificuldade:</p>

<button id='botaoFacil'>Fácil</button>
<button id='botaoMedio'>Médio</button>
<button id='botaoDificil'>Difícil</button>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

    var botaoFacil = document.querySelector("#botaoFacil")
    var botaoMedio = document.querySelector("#botaoMedio")
    var botaoDificil = document.querySelector("#botaoDificil")

    function limpaTela() {

        pincel.fillStyle = 'lightgrey'
        pincel.fillRect(0, 0, 600, 400)
    }

    var raio = 15
    var xAlvo;
    var yALvo

    function desenhaCirculo() {

        limpaTela()

        xAlvo = Math.random() * (600 - (2 * raio))
        yALvo = Math.random() * (400 - (2 * raio))

        pincel.fillStyle = 'blue'
        pincel.beginPath()
        pincel.arc(xAlvo, yALvo, raio, 0, 2 * Math.PI)
        pincel.fill()
    }

    var dificuldade = 1000

    function facil(){

        dificuldade = 1400
    }

    function medio(){

        dificuldade = 1000
    }

    function dificil(){

        dificuldade = 700
    }


    var intervalo = setInterval(desenhaCirculo, dificuldade)

    var acertos = 1
    var erros = 1

    var tamanhoRaio = true

    function disparo(evento){

        var x = evento.pageX - tela.offsetLeft  
        var y = evento.pageY - tela.offsetTop

        if(raio<7){
            tamanhoRaio = false
        }

        if((x>xAlvo - raio) &&
         (x<xAlvo + raio) &&
          (y> yALvo - raio) &&
           (y< yALvo + raio)) {

            document.querySelector('#acertos').innerHTML = '<b>acertos:</b> ' + acertos

            acertos = acertos + 1

            if (tamanhoRaio){
                raio = raio -1}
        }

        else {
            document.querySelector('#erros').innerHTML = '<b>erros:</b> ' + erros

            erros = erros + 1
            raio = raio + 1
        }


        if(erros==6){

            clearInterval( intervalo )
            limpaTela()
            alert('Você errou 5 vezes! Fim de jogo.')

        }
    }

    tela.onclick = disparo

    botaoFacil.onclick = facil
    botaoMedio.onclick = medio
    botaoDificil.onclick = dificil
</script>

Boa tarde, o jogo esta funcionando normalmente. Porém, tentei implementar os botões de dificuldade e eles não estão funcionando. Alguém sabe por quê?

1 resposta
O post foi fechado por inatividade após 3 meses. Para continuar o assunto, recomendamos criar um novo tópico. Bons Estudos!