Concluído! | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

//posição e formatado da bolinha let xBolinha = 300; let yBolinha = 200; let diametro = 30; let raio = diametro / 2;

//velocidade da bolinha let velocidadeXBolinha = 4; let velocidadeYBolinha = 4;

//cenario function setup() { createCanvas(600, 400); }

//loop function draw() { background(100); circle (xBolinha,yBolinha,diametro); movimentoBolinha(); colisaoBolinha(); } //movimento da bolinha function movimentoBolinha (){ xBolinha += velocidadeXBolinha; yBolinha += velocidadeYBolinha;

}

//colisao com a borda function colisaoBolinha(){ if (xBolinha + raio> width || xBolinha - raio< 0){ velocidadeXBolinha *= -1; } if (yBolinha + raio> height || yBolinha - raio < 0){ velocidadeYBolinha *= -1; } }

Olá, Saulo!

No código que você compartilhou, já temos a função movimentoBolinha() que é responsável por atualizar as coordenadas da bolinha de acordo com as velocidades velocidadeXBolinha e velocidadeYBolinha. Essa função já está sendo chamada no loop draw(), o que faz com que a bolinha se mova a cada frame.

Para fazer a bolinha reconhecer as bordas da tela, você já implementou a função colisaoBolinha(). Nessa função, você verifica se a posição da bolinha mais o raio é maior que a largura da tela ou menor que zero (borda esquerda), e se a posição da bolinha mais o raio é maior que a altura da tela ou menor que zero (borda superior). Se alguma dessas condições for verdadeira, você inverte a velocidade da bolinha na respectiva direção.

Seu código já está correto para fazer a bolinha se movimentar e reconhecer as bordas da tela. Parabéns!

Bons estudos!