Olá, Italo! Tudo certo?

Muito bacana que você trouxe três possíveis soluções para o mesmo problema. Vamos então analisá-las?

Primeiro caso:

Inicialmente, a função atualizaTela() é chamada a cada 1 milissegundo, conforme a atividade de setInterval(). Toda vez que isso ocorre, a tela é limpada e então iniciamos um bloco condicional:

• Caso a posição x (horizontal) da bolinha seja maior que 600 (valor estipulado para a largura da tela), nós invertemos o sentido de seu movimento atribuindo o valor 1 à variável sentido:

if( x > 600) {
    sentido = -1;
}

• Caso essa condição não seja verdadeira, realizamos uma nova verificação. Desta vez, veremos se o valor de x é inferior a 0. Se sim, invertemos novamente o sentido do movimento da bolinha (atribuindo o valor 1 à variável sentido):

else if (x < 0) {
  sentido = 1;
}

• Caso nenhuma das condições acima seja verdadeira, o sentido da bolinha permanece o mesmo (direita ou esquerda) e ela é desenhada em tela.

Vale ressaltar que, sempre que a função atualizaTela() é executada, ao final do bloco alteramos o valor da posição x. Se o valor da variável sentido for negativo, estaremos diminuindo o valor de x e a bolinha é deslocada para a direita. Oposto a isso, se o valor da variável sentido for positivo, a bolinha tem seu valor horizontal acrescido e, portanto, migra para a direita.

Segundo caso:

Destaco que a execução deste segundo código depende da inicialização da variável x fora das funções:

function limpaTela(){
    pincel.clearRect(0, 0, 600, 400);
}

function pong(){
    limpaTela();
    desenhaCirculo(x, 20, 15);
    if(funciona){
        x++;
    }
    if(x == 580){
        funciona = false;
    }
    if(funciona == false){
        x = x - 1 ;
    }
    if(x <= 20 ){
        funciona = true;
    } 
} 

var x = 20;
var funciona = true;
setInterval(pong, 1);

O modo pelo qual este código funciona é similar ao primeiro. Inicialmente, teremos a variável funciona, a qual irá determinar o sentido que a bolinha tomará.

Quando executamos a função pong(). Teremos uma sequência de verificações:

• Se a variável funciona possui o valor true, então o valor da bolinha aumentará com o tempo;

if(funciona){
  x++;
}

• Se o valor da variável x for igual a 580, significa que o limite (largura da tela) foi atingido. Desta forma, a variável funciona passará a ter o valor false ;

if(x == 580){
  funciona = false;
}

• Se a variável funciona possui o valor false, teremos o decréscimo do valor da posição x da bolinha;

if(funciona == false){
  x = x - 1 ;
}

• Se a variável x for menor ou igual a 20, significa que o limite inferior foi atingido e x precisa voltar a crescer. Então tornamos funciona igual a true novamente.

if(x <= 20 ){
  funciona = true;
}

Terceiro caso:

Esta última possibilidade é, de certa maneira, uma união das duas formas vistas anteriormente! Bacana, não acha?

Quando entramos na sequência de condições da função atualizaTela(), teremos algo assim:

• Se o valor da variável ida for igual a true e o valor de x for menor que 590 (tamanho máximo estipulado para a tela), a condição é verdadeira e, por esse motivo, o valor de x é acrescido.

if(ida && x < 590){
      x++; // somando valores à x
}

• Caso a condição analisada seja falsa, é verificado se o valor de x é superior a 10. Se sim, a variável ida recebe false e o valor de x é diminuído;

else if(x > 10) {
    ida = false;
    x--;
}

• Por fim, caso nenhuma das condições seja verdadeira, é atribuído à variável ida o valor true, recomeçando o ciclo de verificações após a chamada da função.

else {
    ida = true;
}

Bastante coisa, não é mesmo? Por isso, caso tenha dúvidas com relação à minha explicação ou também ao longo dos seus estudos, sinta-se confortável para perguntar o que for preciso no fórum!

Até mais e bons estudos!