Solução simples para bolinha entrando dentro da raquete (com biblioteca p5.collide)

Olá,

Após realizar as alterações do vídeo, tive minha bolinha travada e tremendo no meio da tela, vi no forum a solução e achei complicada e decidi seguir com o método antigo criando uma função para cada colisão de cada raquete.

Depois de pronto, percebi que a bolinha estava entrando um pouco dentro das raquetes. Após pensar no porque isso estava acontecendo, entendi que estava utilizando o valor do raio para realizar as colisões, funcionava no método antigo de algumas aulas anteriores, mas depois que adicionamos a biblioteca do p5.collide percebi que o calculo havia mudado, e dentro das funções de colisão, eu mudei o "raioBolinha" para "dBolinha" que no caso seria o diâmetro e funcionou.

Espero que ajude.

// variáveis da bolinha
let xBolinha = 200;
let yBolinha = 200;
let dBolinha = 30;
let raioBolinha = dBolinha / 2;

//velocidade da bolinha
let velocidadeXbolinha = 1;
let velocidadeYbolinha = 1;

//variaveis da raquete
let xRaquete = 8;
let yRaquete = 150;
let larguraRaquete = 13;
let alturaRaquete = 100;

//variaveis raquete oponente
let xRaqueteOponente = 580;
let yRaqueteOponente = 150;
let larguraRaqueteOponente = 13;
let alturaRaqueteOponente = 100;
let movimentoYraqueteOponente;

//variaveis de colisao da bolinha
let colidiu = false;

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

function draw() {

  background(0);

  bolinha();
  movimentoBolinha();
  colisaoBorda();
  minhaRaquete();
  raqueteOponente();
  movimentoRaquete();
  colisaoMinhaRaquete();
  colisaoRaqueteOponente();
  movimentoRaqueteOponente();
}

function bolinha(){
  circle(xBolinha, yBolinha, dBolinha);
}

function movimentoBolinha(){xBolinha += velocidadeXbolinha
  yBolinha += velocidadeYbolinha;
}

function colisaoBorda(){if (xBolinha + raioBolinha > width ||
     xBolinha - raioBolinha < 0) {
    velocidadeXbolinha *= -1;}

if (yBolinha + raioBolinha > height ||
     yBolinha - raioBolinha < 0) {
    velocidadeYbolinha *= -1;}
}

function minhaRaquete(){
  rect (xRaquete, yRaquete, larguraRaquete, alturaRaquete);
}

function raqueteOponente(){
  rect (xRaqueteOponente, yRaqueteOponente, larguraRaqueteOponente, alturaRaqueteOponente);
}

function movimentoRaquete(){
  if (keyIsDown(UP_ARROW)) {yRaquete -= 6;}
  if (keyIsDown(DOWN_ARROW)) {yRaquete += 6;}
}

function colisaoMinhaRaquete(){
  colidiu =
  collideRectCircle(xRaquete, yRaquete, larguraRaquete, alturaRaquete, xBolinha, yBolinha, dBolinha);
  if (colidiu){velocidadeXbolinha *= -1;}
}

function colisaoRaqueteOponente(){
  colidiu =
  collideRectCircle(xRaqueteOponente, yRaqueteOponente, larguraRaqueteOponente, alturaRaqueteOponente, xBolinha, yBolinha, dBolinha);
  if (colidiu){velocidadeXbolinha *= -1;}
}

function movimentoRaqueteOponente(){
  movimentoYraqueteOponente = yBolinha -yRaqueteOponente - alturaRaqueteOponente /2 -30;
  yRaqueteOponente += movimentoYraqueteOponente;
}