1
resposta

Alguém pode me ajudar com esse código por favor? Não consigo ficar alternando o texto abaixo do canvas informando qual a velocidade que está selecionada. Onde eu errei?

<meta charset="utf-8">
<hr>
<h1>Tente acertar o alvo!</h1>
<hr>
<big>Esse minijogo é ótimo para treinar sua mira para jogos de tiro!</big>
<hr>
<canvas width="600" height="400"></canvas>
<br>
<button>Mudar velocidade</button>

<script>

    function escreve(texto)
    {   document.write(texto);}

    function desenhaBordas()
    {
        pincel.strokeStyle = "black";
        pincel.strokeRect(0 , 0 , 600 , 400);
    }

    function desenhaCirculo(x , y , raio , cor) 
    {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function desenhaAlvo(x , y)
    {
        desenhaCirculo(x , y , raio + 20 , 'red');
        desenhaCirculo(x , y , raio + 10 , 'white');
        desenhaCirculo(x , y , raio , 'red');
    }

    function sorteiaPosicao(maximo)
    {   return Math.floor(Math.random()*maximo);}

    function dispara(evento) 
    {
        var xClick = evento.pageX - tela.offsetLeft;
        var yClick = evento.pageY - tela.offsetTop;

        auxDispara(xAlvo , yAlvo , xClick , yClick);
    }

    function auxDispara(xAlvo , yAlvo , xClick , yClick)
    {
        var xAlvoMin = xAlvo - 10;
        var xAlvoMax = xAlvo + 10;

        var yAlvoMin = yAlvo - 10;
        var yAlvoMax = yAlvo + 10;

        if(xClick < xAlvoMax && xClick > xAlvoMin)
        {
            if(yClick < yAlvoMax && yClick > yAlvoMin)
            {
                score++;
                alert("Você acertou! | Pontos: " + score);
            }
        }
    }

    function atualizaTela()
    {
        pincel.clearRect(0 , 0 , 600 , 400);
        desenhaBordas();

        xAlvo = sorteiaPosicao(600);
        yAlvo = sorteiaPosicao(400);

        desenhaAlvo(xAlvo , yAlvo);
    }

    var botao = document.querySelector("button");
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0 , 0 , 600 , 400);

    var raio = 10;
    var score = 0;
    var xAlvo;
    var yAlvo;
    var velocidade = [1000,750,500];
    var auxVel = 0;

    var interval = setInterval(atualizaTela, velocidade[auxVel]);
    botao.onclick = function(){
        auxVel++;

        if(auxVel == 3){auxVel = 0;}

        console.log(velocidade[auxVel]);
        clearInterval(interval);
        interval = setInterval(atualizaTela, velocidade[auxVel]);
    }
    escreve(" | Velocidade atual: " + (auxVel+1));
    tela.onclick = dispara;


</script>
1 resposta
    var h2 = document.createElement("h2");
    document.body.appendChild(h2);
    h2.innerText = " | Velocidade atual: " + (auxVel+1);

Sugestão: faça ganhar mais pontos de acordo com a velocidade.