1
resposta

Minha resolução da bolinha vai e volta

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

<script>

    // Configura o canvas
    var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        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;
    var x_limite_fim  = tela.width;
    var x_volta = tela.width;

    function atualizaTela() {

            if (x <= x_limite_fim) {
           limpaTela();
           desenhaCirculo(x, 20, 10);
        x++;
        } else if (x_volta >=20) {
            limpaTela();
        desenhaCirculo(x_volta, 20, 10);
        x_volta--;     
        } else {
            x = 20;
            x_volta = tela.width; 
            }  
    }

    setInterval(atualizaTela, 10);

</script>
1 resposta

Bom dia!

Sua resolução ficou excelente! Você fez um ótimo uso do aprendizado.

Parabéns pelo empenho nos estudos e continue praticando.

Para que mais pessoas consigam visualizar a sua solução proposta, é recomendado que você marque este tópico como solucionado. Assim pode ajudar ainda mais pessoas :)

Bons estudos!