Fala Rachel, Tudo certo?
Precisamos definir um sentido para a bolinha. Quando for 1 ela andará para direito (o número de x aumentará) e quando for -1 ela andará para esquerda (o número de x diminuirá).
A lógica dentro do if não está sendo feita. O que movimenta a bola é o setInterval(animacao, 10). Sendo assim toda lógica de sentido deve estar dentro da função animação.
Eu retirei a função volta, já que não precisaremos dela.
Deixei apenas um setInterval
Implementei uma variável de sentido, fora da função, para iniciar com o sentido para direita.
No if precisaremos definir quando alterar o sentido da bolinha. No final de tudo ficou da forma abaixo:
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = "lightblue";
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
}
var x = 20;
let sentido = 1;
function animacao() {
pincel.clearRect(0, 0, 600, 400);
desenhaCirculo(x, 20, 10);
if (x == 20) {
sentido = 1;
} else if (x == 580) {
sentido = -1
}
x = x + sentido
}
setInterval(animacao, 10);
</script>
Quando o x chegar a 20, mudaremos o sentido para direita.
Quando o x chegar a 580, mudaremos o sentido para esquerda.
Se colocarmos <= ou >= nessas verificações, acabaremos colocando os sentidos em conflito e a bolinha pode ficar "presa" em algum momento do movimento.
Exemplo: Se o x for maior que 20 o sentido será para a direita... Aí verificaríamos de o x é maior ou igual a 580 para trocar o sentido para esquerda... Mas o x, apesar de estar igual a 580 ele também é maior que 20... O if irá tirar 1 do x, que será 579 e adcionará logo depois para 580... e ficará travado no final da tela.
