A bolinha fica dando voltas na tela. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<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 function atualizaTela (){ limpaTela(); desenhaCirculo(x,20,10); if(x < 600){ x++; }else{ if (x >= 600){ while (x > 0){ limpaTela(); desenhaCirculo(x,20,10); x = x -20 } } } } setInterval(atualizaTela,10) </script>

Oi Rafael, tudo bom?

Lendo seu código me parece que a bolinha vai até o final da tela e depois pula para o começo dela, certo?

acontece que quando vc coloca o

 if (x >= 600){
     while (x > 0){
                  limpaTela();
                  desenhaCirculo(x,20,10);
                  x = x -20;
    }
}

Vc está preso nesse loop até que a variável X seja menos do que 0. Só que isso vai acontecer dentro de um único frame.

Lembra que usamos o comando setInterval para chamar uma função repetidamente de tempos em tempos?

Isso pq se chamarmos essa função em um loop sem ter o intervalo de tempo, nó não conseguiríamos ver nada do que está acontecendo. O PC executaria tudo muito mais rápido do que conseguimos ver.

O que esse exercicio pede pra vc fazer é levar a bolinha de um lado para o outro da tela infinitamente. Ou seja vc tem algumas variávels para isso.

let x = 0;  // representa a posição q a bolinha está nesse momento.

let direcao = 1; // direção que a bolinha está andando. positivo para a direira e negativo para a esquerda

let velocidade = 20; // qual rápido a bolinha anda

Usando essas 3 variáveis vc pode pensar de uma maneira um pouco diferente sobre o problema. Cada uma tem uma unica responsabilidade e vc pode manipular elas separadamente para mudar o comportamento da bolinha.

Assim, quando a bolinha passar da posição 600 vc pode so inverter a direção dela.

Qualquer duvida manda aqui no forum