Bolinha na velocidade da luz | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Consegui fazer o exercício da bolinha ir e voltar eternamente, no entanto, utilizei um formato diferente do apresentado pelo instrutor. A questão é que a minha bolinha parece ir acelerando a medida que vai e volta. Isso é devido a ter um 'setInterval' dentro de outro?

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>

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

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }

    function limpaTela(){

        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;



    function atualizaTela() {
        var volta = false;

        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++;

        if(x>=600) {
            volta = true;          
            setInterval(voltaTela, 100);
        }

    }

    function voltaTela() {
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x = x-1;
        if(x<=0) {
            volta = false;
            setInterval(atualizaTela, 100);
        }
    }

    setInterval(atualizaTela, 10);

</script>

Boa noite, Leandro! Como vai?

Esse comportamento que vc está vendo na realidade não é o problema em si. A lógica do código está incorreta pq o setInterval() vai executar uma função a cada X milissegundos. Ou seja, o setInterval(atualizaTela, 10) invoca a função atualizaTela() a cada 10 milissegundos. Daí, quando x>=600, vc faz setInterval(voltaTela, 100) que vai fazer com que a função voltaTela() seja executada a cada 100 milissegundos. Então, com isso ao mesmo tempo serão executados a cada 10 milissegundos a função atualizaTela() e a cada 100 milissegundos a função voltaTela(). E aí vai acumulando vários setInterval() fazendo com que a velocidade vá mudando como vc oberservou! A partir daí é só trevas e escuridão, meu aluno!

Um teste legal para vc confirmar esse comportamento é colocar um console.log() dentro da função atualizaTela() e outro dentro da voltaTela(). Aí vc verá a bagunça que vai ficar o console do navegador.

Pra resolver esse problema e vc sair dessas densas trevas, basta usar o clearInterval() que limpa e para de executar funções previamente utilizadas no setInterval()! Segue a solução!

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>

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

    function desenhaCirculo(x, y, raio) {

      pincel.fillStyle = "blue";
      pincel.beginPath();
      pincel.arc(x, y, raio, 0, 2*Math.PI);
      pincel.fill();
    }

    function limpaTela(){

      pincel.clearRect(0, 0, 600, 400);
    }


    function atualizaTela() {
      var volta = false;

      limpaTela();
      desenhaCirculo(x, 20, 10);
      x++;

      if(x>=600) {
          volta = true;        

          // limpa o timer.
          clearInterval(timer);

          // salva o novo timer.
          timer = setInterval(voltaTela, 10);
      }

    }

    function voltaTela() {
      limpaTela();
      desenhaCirculo(x, 20, 10);
      x = x-1;
      if(x<=0) {
          volta = false;

          // limpa o timer.
          clearInterval(timer);

          // salva o novo timer.
          timer = setInterval(atualizaTela, 10);
      }
    }


    var x = 20;

    // salvo o timer numa variável.
    var timer = setInterval(atualizaTela, 10);

</script>

Obs.: O tempo utilizado em todos os setInterval() deve ser o mesmo para que a velocidade se mantenha constante em toda a animação!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!