1
resposta

Vai e Volta - com um pouco mais de linhas mas foi como resolvi :D

<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;
    var verifica = true;

    function atualizaTela(){

        limpaTela();
        desenhaCirculo(x, 20, 10);

        if(x == 600){

            verifica = false;

        }

        if(x == 0){

            verifica = true;

        }

        if(verifica){

            x++;

        } else{

            x--;

        }

    }

    setInterval(atualizaTela, 0.1);

</script>

Do professor ficou mais simples, mas fiquei feliz com a solução que achei haha

1 resposta

Uau! Você está de parabéns, fez um excelente trabalho! Achei perfeita sua linha de raciocínio! Continue assim!!!

Sds,

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software