ANIMAÇÃO NÃO FUNCIONA | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Havia feito um programa que era 3 bolinhas que ficavam quicando pra lá e pra cá nas paredes, também havia colocado uma certa física nelas caso elas colidissem uma na outra, o codigo funcionou tudo certinho, no entanto o código estava muito grande e tentei criar um novo reduzindo o anterior utilizando a "function" para ele desenhar e "criar a parede" para a bolinha bater e criar ainda mais bolinhas de forma mais simples, no entanto não está funcionando, a bolinha fica estática sem movimentação alguma, o codigo em questão é esse:

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

<script>

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

    var raio = 10;

    function desenhaCirculo(x, y, raio, cor) {

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

     function limpaTela(){
        pincel.clearRect(0,0,600,400)
    }

    function parede(x,y,sentidox,sentidoy,cor){



        limpaTela()
        desenhaCirculo(x,y,10,cor)
            if(x>600){
                sentidox = -3
                y = y + sentidoy
            } else if (x<0){
                sentidox = 3
                y = y + sentidoy
            }
            if(y>400){
                sentidoy = -3
            } else if(y<0){
                sentidoy = 3
            }





            x = x+sentidox



            if(x>600){
                sentidoy = -3
                x = x + sentidox
            } else if (y<0){
                sentidoy = 3
                x = x + sentidox
            }
            if(x>600){
                sentidox = -3
            } else if(x<0){
                sentidox = 3
            }




            y = y+sentidoy
    }

    function azul(){
        parede(x1,y1,sentidox1,sentidoy1,"blue")
    }


    //bola azul
        var x1 = Math.round(Math.random()*600)
        var y1 = Math.round(Math.random()*400)
        var sentidox1 =  Math.round(Math.random()*5)
        var sentidoy1 = Math.round(Math.random()*5)


    setInterval(azul, 20)



</script>`

Oi, Eduardo! Tudo bom?

Desde já, peço perdão pela demora em retornar!

A bolinha fica estática, pois as variáveis que atuam sobre seu movimento são somente criadas com os valores aleatórios, o que significa dizer que estes valores não são alterados em outro momento.

Para fazer com que novos valores sejam gerados constantemente, podemos criar uma função que gera números para as posições.

Primeiramente, precisa-se alterar as variáveis x1, y1, sentidox1 e sentidoy1, as quais não receberão, logo de início, um valor, isto é, apenas iremos inicializá-las, da seguinte forma:

var x; 
var y;
var sentidox;
var sentidoy;

Note que, além de remover os trechos de código que produziam números aleatórios, remove o "1" do final de todas as variáveis, tornando-as genéricas.

Feito isso, podemos desenvolver a função, olha só uma possível maneira de fazê-la:

function geraPosicoesAleatorias() {
    x = Math.round(Math.random()*600)
    y = Math.round(Math.random()*400)
    sentidox =  Math.round(Math.random()*5)
    sentidoy = Math.round(Math.random()*5)

    return x, y, sentidox, sentidoy
}

A função geraPosicoesAleatorias() terá como objetivo gerar novos valores aleatórios e retorná-los todas as vezes em que for chamada!

Para finalizar o que estamos desenvolvendo, precisaremos modificar a função azul(). Veja abaixo as etapas disso:

Alteração do nome da função: quando estamos desenvolvendo um programa, é de fundamental importância dar nomes com um significado concreto a variáveis e funções. Por esse motivo, troquei a palavra “azul” por “alteraPosicaoBolinhas”, que explica muito mais as motivações por trás da função;
Remover a chamada da função limpaTela() de parede() e adicioná-la em alteraPosicaoBolinhas(). Assim, toda vez que executarmos a função alteraPosicaoBolinhas(), limparemos a tela, dando a impressão de que as bolinhas pularam para outro lugar!
Construir uma estrutura de repetição for. Por meio disso, criaremos três bolinhas, conforme o seu propósito inicial!

Depois do passo a passo acima, chegamos neste resultado:

function alteraPosicaoBolinhas(){
  limpaTela()
  for (var i = 0; i < 3; i++) {
      x, y, sentidox, sentidoy = geraPosicoesAleatorias();
      parede(x,y,sentidox,sentidoy, 'blue');
  }
}

Enquanto a variável i (contador) for menor que 3, bolinhas azuis continuarão surgindo, com valores aleatórios, em tela.

Ao fim, precisaremos alterar a função setInterval:

setInterval(alteraPosicaoBolinhas, 80);

Agora, a cada 80 milissegundos, a função alteraPosicaoBolinhas é executada, fazendo com que as três bolinhas azuis fiquem quicando pela tela do navegador!

Espero que tenha compreendido e achado minha solução interessante. Fico à disposição para te ajudar caso surjam dúvidas ao longo dos seus estudos.

Até mais, Eduardo!!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.