A bolinha faz 3 percursos e parece decair num loop que a prende na extremidade direita | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

A bolinha vai(esquerda - direita), volta(direita-esquerda), vai e na extremidade direita fica "presa". Qual seria o problema ?

Desde já , grato!

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

<script>

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

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

    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;
    var chegou = false;
    var voltou = false;

    function atualizaTela(){

        if((x < 600) && (chegou == false)){

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

        }else{

                chegou = true;

                if(chegou){

                    limpaTela()
                    desenhaCirculo(x, 20, 10);
                    x--;
                }

                if(x == 20){

                        voltou = true;
                }
            }

        if(voltou){

            chegou = false;
        }

    }

setInterval(atualizaTela, 10);

</script>

Oi Edson, bom dia!

O problema é que em um determinado momento, o chegou fica falso com x igual a 600, indo pro else e deixando x com 599 e chegou com true, mas no final da função o chegou volta a ser falso. Na próxima chamada da função, como chegou está falso e o x está com 599, entra no primeiro if, deixando o x com 600 de novo.

Explicando mais detalhado:

Quando a bolinha "vai" (esquerda - direita) a primeira vez, os valores das variáveis chegou e voltou são ambos falsos, então, até a bolinha chegar na extrema direita (o valor de x ser 600), sempre vai entrar apenas no primeiro if.

Na primeira vez que chegar na extrema direita, vai cair no else, deixando chegou como verdadeiro. Com chegou verdadeiro e voltou falso, vai entrar apenas no if(chegou) dentro do else, fazendo a bolinha "voltar" até a extrema esquerda.

Quando ela chegar na extrema esquerda, com o valor de x sendo 20, o voltou vai ficar verdadeiro. Assim, logo em seguida, nessa mesma chamada da função atualizaTela, chegou fica falso de novo.

Ao fim dessa atualização na tela, estamos com x com 20, chegou falso e voltou verdadeiro. Nas próximas chamadas da função atualizaTela, vai entrar no primeiro if, aumentando sempre em 1 o valor de x (fazendo a bolinha "ir" pra direita), e no último if lá do final, colocando de novo o valor falso pra chegou (mantendo o valor dela).

Ao chegar na extrema direita pela segunda vez, estaremos com a seguinte situação: x com 600, chegou falso e voltou verdadeiro. Quando entrar novamente na função atualizaTela, vai acontecer o seguinte:Como x não é menor que 600 nesse momento, vai entrar no else, deixando chegou verdadeiro. Em seguida, vai entrar no if(chegou), deixando x com 599. Por fim, como voltou tá verdadeiro, vai entrar no if(voltou), deixando chegou falso.O fim dessa atualização vai deixar as variáveis assim: x com 599, chegou falso e voltou verdadeiro.

A ideia seria que nesse momento fosse diminuindo o x até 20. Porém, na próxima atualização da tela, como x está menor que 600 e chegou está falso, vai entrar no primeiro if, deixando x com 600 de novo e finalizando a atualização com os valores x com 600, chegou falso e voltou verdadeiro, a mesma situação de quando estávamos na extrema direita na segunda vez.

Aí esses últimos dois passos se repetem infinitamente, pois sempre que x diminui pra 599, ele volta a entrar no primeiro if, voltando ele pra 600.