Código JavaScript comentado - Parte 1 do Projeto de Pong

//Params do circle
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro/2;

//Params da movimentação da bolinha
let velocidadeXBolinha = 5;
let velocidadeYBolinha = 5;

function setup() {
  createCanvas(600, 400); //Tamanho do Background em pixels
}

function draw() {
  background(0); //Cor do Background 0 = Fundo Preto
  mostraBolinha(); //Chama a função mostraBolinha 
    movimentaBolinha(); //Chama a função movimentaBolinha 
  verificaColisaoBorda(); //Chama a função verificaColisaoBorda
}

function mostraBolinha() {
 circle(xBolinha, yBolinha, diametro); //Função Circle, params x,y,diametro
}

function movimentaBolinha(){
 xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBorda(){
//A soma e subtração do raio é para que a bolinha não entre pela metade na borda
  if (xBolinha + raio > width ||
    xBolinha - raio < 0) //Quando o X da bolinha for maior que o Widht, ou menor que 0 a bolinha esta tocando na borda
  {
    velocidadeXBolinha *= -1; //Quando toca na borda a bolinha inverte a direção do X
  }
//A soma e subtração do raio é para que a bolinha não entre pela metade na borda
  if (yBolinha + raio > height ||
    yBolinha - raio < 0) //Quando o Y da bolinha for maior que o Height, ou menor que 0 a bolinha esta tocando na borda
  {
    velocidadeYBolinha *= -1;
  }
}