1
resposta

Minh solução para a bolinha voltar quando bater nas bordas

script>
        var canvas = document.querySelector("canvas")
        var pincel = canvas.getContext("2d")

        pincel.fillStyle = "lightgrey"
        pincel.fillRect(0,0,600,400)

        function desenhaBolinha(x,y,raio){
            pincel.fillStyle = "violet"
            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 raio = 10
        var inverteBolinha = 1

        function animaBolinha(){
            limpaTela()
            desenhaBolinha(x,raio,10)

            if(x + raio > 600){       //somei o X + RAIO na primeira condição para que não entre a metade da bolinha na borda na hora da colisão
                inverteBolinha *= -1
            } else if(x - raio < 0){   // subtrai o X - RAIO para que não entre metade da bolinha na hora da colisão
                inverteBolinha *= 1
            }

            x += inverteBolinha
        }

        setInterval(animaBolinha,10)
    </script>
1 resposta

Oi, Gabrielle! Tudo bem?

Isso mesmo, a solução está correta.

Qualquer dúvida estamos à disposição.

Continue praticando e bons estudos!

Até mais! =)