1
resposta

Tudo o que vai, volta! Minha Solução

Boa noite! Gostaria de compartilhar com vocês a minha solução. Utilizei operadores condicionais aninhados para resolver.

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

<script>

    var tela = document.querySelector('canvas')
    var pincel = tela.getContext('2d')
    pincel.fillStyle = 'white'
    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 sentido = 1

    function animaCirculo() {

        if (sentido == 1) {

            if (x < 600) {
                limpaTela()
                desenhaCirculo(x, 20, 10)
                x++
            } else if (x >= 600) {
                sentido = 0
            }
        } 

        if (sentido == 0) {

            if (x > 0) {
                limpaTela()
                desenhaCirculo(x, 20, 10)
                x = x - 1
            } else if (x == 0) {
                sentido = 1
            }

        }
    }

    setInterval(animaCirculo, 10);


</script>

1 resposta

Olá João, espero que esteja bem.

Obrigada por compartilhar seu código conosco.

Você pode compartilhar seus exercícios no Linkedin e/ou subir seu projeto no Github, pois estas ferramentas vão te permitir um maior alcance =)

Dúvidas sobre o conteúdo dos cursos, estaremos à disposição!

Se este post te ajudou, por favor, marca como solucionado ✓. Bons estudos!