Bolinha não toca na raquete ou retorna antes de tocar

Em meu código a bolinha não está tocando na raquete ou as vezes retorna antes de tocar, pode ajudar?

let xBolinha = 300;
let yBolinha = 200;
let dBolinha = 20;
let velocidadeX = -1;
let velocidadeY = 5;
let raio = dBolinha /2;
let xRaquete = 10;
let yRaquete = 15;
let larguraRaquete = 10;
let comprimentoRaquete = 150;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentarBolinha();
  verificarColisaoBorda();
  mostraRaquete();
  movimentaRaquete();
  verificaColisaoRaquete();

}

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

function movimentarBolinha(){
  xBolinha += velocidadeX;
  yBolinha += velocidadeY;
}

function verificarColisaoBorda(){

  if (xBolinha + dBolinha > width || xBolinha - raio < 0){
     velocidadeX *= -1;    
  }
    if (yBolinha + dBolinha > height || yBolinha - raio < 0){
     velocidadeY *= -1;    
  }
}

function mostraRaquete(){
  rect(yRaquete,xRaquete,larguraRaquete,comprimentoRaquete);
}

function movimentaRaquete(){
  if (keyIsDown(UP_ARROW)){
  xRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
  xRaquete += 10;
  }

}

function verificaColisaoRaquete(){
  if (xBolinha - dBolinha < xRaquete + comprimentoRaquete && yBolinha - raio <yRaquete + comprimentoRaquete && yBolinha + raio > yRaquete){
  velocidadeX *= -1;
  }

  }