Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Resolução

Logo de cara pensei em trabalhar com condicionais If e coordenadas, o pulo do gato é utilizar a var sentidoMovimento trabalhando com positivo e negativo.

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

    <script>

        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "white";
        pincel.fillRect(0, 0, 1000, 400);

        function desenhaCirculo(x, y, raio){

            pincel.fillStyle = "blue"
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * Math.PI);
            pincel.fill();
        }

            desenhaCirculo(10, 10, 10);

        function limpaTela(){

            pincel.clearRect(0, 0, 1000, 400);

        }

        var x = 20
        var sentidoMovimento = 1 // movimento por pixel configurado pelo setInterval

        function atualizaTela() {

            limpaTela();
            if (x < 0) {
                sentidoMovimento = 1
            } else if(x > 600) {
                sentidoMovimento = -1
            }

            desenhaCirculo(x, 20, 10);
            x = x + sentidoMovimento;

        }

        setInterval(atualizaTela, 2);



    </script>
1 resposta
solução!

Olá, Luca, tudo bem?

Analisei e testei o seu código e ele está correto! Está bem estruturado, endentado e atende aos requisitos da atividade, parabéns!

Continue praticando as atividades para progredir na sua jornada da programação!

Caso surjam dúvidas, fico à disposição.

Abraços e bons estudos.

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