//Parametros bolinha
let xBolinha = 300;
let yBolinha = 200
let diametro = 20;
let raio = diametro / 2

//Velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//Parametros Raquete
let xRaquete = 10;
let yRaquete = 150;
let alturaRaquete = 8;
let comprimentoRaquete = 80;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentoBolinha();
  colisaoborda();
  raquete();
  movimentoRaquete();
  verificaColisaoRaquete()
}

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

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

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

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

function raquete(){
rect(xRaquete, yRaquete, alturaRaquete, comprimentoRaquete);
}

function movimentoRaquete(){
  if (keyIsDown(UP_ARROW)){
  yRaquete -= 10;
  }

  if (keyIsDown(DOWN_ARROW)){
  yRaquete += 10;
  }
}  

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

quando eu coloco somente esta parte do código (xBolinha - raio < xRaquete + comprimentoRaquete) ela colide porem a colisão acontece bem muito a frente do retangulo, quando termino de colocar o código de colisão a bolinha passa direto e não colide com o retângulo gostaria de saber o que esta acontecendo de errado?