Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Alguém pode me ajudar com esse código por favor? Não consigo ficar alternando entre as três velocidades do setInterval toda vez que clico no botão. Onde 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 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;
    var auxVel = 3;

    if(auxVel == 0){auxVel = 3;}
    if(auxVel == 1){velocidade =  500;}
    if(auxVel == 2){velocidade =  750;}
    if(auxVel == 3){velocidade = 1000;}

    botao.onclick = function(){auxVel = aux + 1;}
    setInterval(atualizaTela, velocidade);
    tela.onclick = dispara;
    document.write(" | Velocidade: " + auxVel);

</script>
1 resposta
solução!

Para mudar a velocidade você terá que usar clearInterval seguido de setInterval.

Exemplo:

Substitua essas linhas do seu código

    botao.onclick = function(){auxVel = aux + 1;}
    setInterval(atualizaTela, velocidade);
    tela.onclick = dispara;
    document.write(" | Velocidade: " + auxVel);

Por estas

    var interval = setInterval(atualizaTela, velocidade);
    botao.onclick = function(){
        velocidade -= 100;
        console.log(velocidade);
        clearInterval(interval);
        interval = setInterval(atualizaTela, velocidade);
    }
    tela.onclick = dispara;