1
resposta

Exercício comentado

Olá pessoal, estou colocando meu código aqui com comentários. Coloquei da forma que entendi a linha de acontecimentos e caso alguém tenha formas de deixar o código mais limpo e se tiver algum comentário equivocado me avise para eu entender certo blz.

<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();
    }
// apaga os elementos da tela e deixa um quadro branco novamente
    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

// variavel que representa o eixo x da bola, chamada fora da função pois será atualizada e somada +1 a cada periodo de tempo posteriormente na função atualizaTela.
    var x = 20;

    // variavel para testar se a bolinha chegou ao limite do canvas no eixo X.

    var voltaBola = true

   // Função que representa a condição de seguida e parada da variavel voltaBola. No caso o limite de 600 no eixo X. Enquanto esse resultado não é atingido, uma nova bolinha é gerada no eixo x e somado 1px.

    function atualizaTela() {
        if ( voltaBola == false){
            limpaTela();
        desenhaCirculo(x, 20, 10);
        x++;

        if(x == 600){
            voltaBola = true
        }
    }else{
        // Quando a variável voltaBola atingir a condição TRUE (600 no eixo x),  será desenhada uma nova bolinha porém agora subtraindo 1px no eixo X.
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x--;

        // Quando a bolinha chegar no 0 do eixo x então a condição voltaBola será falsa e voltamos à condição do segundo if da função, estabelecendo um loop. 
        if(x == 0){
            voltaBola = false
        }
    }

       }   
       // Nome da função que queremos que o javascript chame e o respectivo intervalo de tempo em millisegundos.

    setInterval(atualizaTela, 5);

</script>
1 resposta

Olá, Felipe! Tudo bem por aí?

Excelente, sua solução está correta, parabéns!

Caso tenha alguma dúvida não deixe de compartilhar.

Bons estudos e até mais!