O que tem de errado na colisao da raquete do oponente nesse codigo?

Depois de inserir a colisão da raquete do oponente a bolinha fica batendo e voltando apenas no meio, não consegui identificar onde estou errando. Antes disso, o código estava funcionando normalmente. Help plz

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

function draw() {
  mostraBolinha();
  movimentaBolinha();
  colisaoBorda();
  mostraRaquete(xRaquete, yRaquete);
  movimentaRaquete();
  colisaoRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente()
  colisaoRaquete(xRaqueteOponente, yRaqueteOponente)
}

//variaveis da bolinha
var xBolinha = 300;
var yBolinha = 250;
var diametro = 25;
var raio = diametro / 2;
var velocidadeXBolinha = 4;
var velocidadeYBolinha = 4;

//variaveis da raquete
var xRaquete = 10;
var yRaquete = 200;
var larguraRaquete = 10;
var alturaRaquete = 100;

//variaveis do oponente
var xRaqueteOponente = 580;
var yRaqueteOponente = 200;
var velocidadeYOponente;

function movimentaBolinha(){
   xBolinha += velocidadeXBolinha
  yBolinha += velocidadeYBolinha
}
function mostraBolinha(){
  background(0);
  circle(xBolinha,yBolinha,diametro)
  movimentaBolinha()
}
function colisaoBorda(){
  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 ,larguraRaquete,alturaRaquete)
}
function movimentaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete += -10
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10
  }
}
function colisaoRaquete(x, y){
  if (xBolinha - raio < x + larguraRaquete && 
      yBolinha - raio < y + alturaRaquete && 
      yBolinha + raio > y){
    velocidadeXBolinha *= -1;
  }
}
function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente -larguraRaquete / 2 - 30  
  yRaqueteOponente += velocidadeYOponente
}