Algo errado não está certo

É simples: tudo estava indo bem até o oponente ser colocado em campo.

Basicamente percebi que ao adicionar raquete do oponente e suas variáveis a bolinha simplesmente bugou, a meu ver, parece que a bolinha colide com algo inexistente no meio da tela, fazendo movimentos complementante inconsistentes.

Segue o codigo e o link do P5: https://editor.p5js.org/spike12x/full/XQ9AlGkkB

//variaveis bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let raio = diametro / 2;

//variaveis velocidade da bolinha
let velocidadeXBolinha = 2;
let velocidadeYBolinha = 2;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//variáveis do oponente 
let xRaqueteOponente = 585;
let yRaqueteOponente = 180;
let velocidadeYOponente;

//placar jogo
let pontosPlayer = 0;
let pontosOponente = 0;

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

//desenho da bolinha
function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  bordaBolinha();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaquete, yRaquete);
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
}

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

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

function bordaBolinha(){
  if (xBolinha + raio> width || xBolinha - raio < 0){
    velocidadeXBolinha *= - 1;
  }

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

function mostraRaquete(x, y) {
    rect(x, y, raqueteComprimento, raqueteAltura);
}

function movimentaMinhaRaquete() {
    if (keyIsDown(UP_ARROW)) {
        yRaquete -= 10;
    }
    if (keyIsDown(DOWN_ARROW)) {
        yRaquete += 10;
    }
}

function verificaColisaoRaquete(x, y) {
    if (xBolinha - raio < x + raqueteComprimento && yBolinha - raio < y + raqueteAltura && yBolinha + raio > yRaquete) {
        velocidadeXBolinha *= -1;
    }
}

function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 - 30;
  yRaqueteOponente += velocidadeYOponente;
}

function incluiPlacar(){
  fill(255);
  text(pontosPlayer, 278, 26);
  text(pontosOponente, 321, 26);
}

function marcaPonto(){
  if (xBolinha > 590){
    pontosPlayer += 1
  }

  if (xBolinha < 10){
    pontosOponente += 1
  }
}

Fazendo alguns testes, vi que a falha que deixa a bolinha estranha acontece ao chamar a função "verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente)", e apenas ela, quando a função da raquete do player é chamada o codigo funciona normalmente...

Ó oraculos do código, me forneçam sua sabedoria!