Pong Parte 2 - Concluído

Oi! Essa é a continuação do meu projeto. Estou seguindo a mesma lógica de fazer acompanhando a aula e depois tentando sozinho e sinto que estou começando a entender mais... Pra mim, ainda é como se tivesse aprendendo Japones, porém sinto que estou começando a entender kkk.

//Variaveis Bolinha;
let xBolinha = 300
let yBolinha = 200
let diametro = 30
let raio = diametro/2

//Variaveis Velocidade
xVelocidadeBolinha = 2;
yVelocidadeBolinha = 2;

//Variavel Raquete
let xRaqueteA = 5;
let yRaqueteA = 150;
let AlturaRaquete = 65;
let ComprimentoRaquete = 10; 

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

function draw() {
  background(0);
  MostraBolinha ();
  MoveBolinha ();
  ColisaoBorda ();
  MostraRaqueteA ();
  MoveRaqueteA ();
  ColisaoRaqueteA ();
}

function MostraBolinha (){
  circle (xBolinha, yBolinha, diametro);
}

function MoveBolinha () {
  (xBolinha += xVelocidadeBolinha); 
  (yBolinha += yVelocidadeBolinha)
}

function ColisaoBorda (){
  if (xBolinha + raio > width || xBolinha - raio < 0) (xVelocidadeBolinha *= -1);
  if (yBolinha + raio > height || yBolinha - raio < 0)  (yVelocidadeBolinha *= -1);
}

function MostraRaqueteA (){
  rect (xRaqueteA, yRaqueteA, ComprimentoRaquete, AlturaRaquete)
}

function MoveRaqueteA (){
  if (keyIsDown (UP_ARROW)) { yRaqueteA -= 10}
  if (keyIsDown (DOWN_ARROW)) { yRaqueteA += 10}
}

function ColisaoRaqueteA (){
 if ( xBolinha - raio < xRaqueteA + ComprimentoRaquete && yBolinha - raio < yRaqueteA + AlturaRaquete && yBolinha - raio > yRaqueteA) { xVelocidadeBolinha *= -1}
}