Consigo ir e voltar mas, não consigo deixar eternamente a bolinha ficar indo e voltando. Preciso colocar isso num loop?

Oi Josemar,

Você consegue postar sua solução para gente analisar melhor?

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

<script>
    var tela = document.querySelector("#tela");
    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 x1 = 20;

    var x2 = 600;

    function vaiEVolta(){

            if(x1 < 600){
                atualizaTela();
            }
            else if(x2 > 20){
                atualizaTelaVoltando();    
            }    

    }

    function atualizaTela(){

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

    }

    function atualizaTelaVoltando(){

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

    setInterval(vaiEVolta, 10);

</script>

De certa forma, seu código já está dentro de um loop (por conta do setInterval). Precisamos encontrar outra estratégia para resolver o problema.

Experimente utilizar apenas uma variável para a posição e outra variável para guardar o sentido que a bolinha está andando. Dependendo do sentido, você incrementa ou decrementa a posição. Não se esqueça de atualizar o sentido quando a bolinha atinge a parede.

Veja o que consegue fazer e me diga se conseguiu!

No exercício tem o gabarito, mas quebre mais um pouco a cabeça, só mais um pouco.

Oi Josemar, foi? Precisa de ajuda ?

Uma forma de conseguir este efeito seria fazendo a seguinte alteração:

   function vaiEVolta(){

            if(x1 < 600){
                atualizaTela();
            }
            else if(x2 > 20){
                atualizaTelaVoltando();    
            } 


            if (x2==20){
                x1 = 20;
                x2 = 600;
            }


    }