[Dúvida] Bolinha passa das bordas e não volta

Olá pessoal! Uma dúvida aqui>

se eu uso o código dessa maneira:

//variaveis da bolinha
let xBolinha = 250;
let yBolinha = 200;
let diametro = 15; //x da bolinha é o centro dela.
let raio = diametro/2;
let dirBolinha = xBolinha + raio;
let esqBolinha = xBolinha - raio;
let supBolinha = yBolinha - raio;
let infBolinha = yBolinha + raio;

//velocidade da bolinha
let velocidadexbolinha = 4;
let velocidadeybolinha = 4;

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

function draw(){
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBordas();
  minhaRaquete();
  movimentarRaquete();
  //colisaoRaquete();
  colisaoRaqueteCopia();
}

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

function movimentaBolinha(){
  xBolinha += velocidadexbolinha;
  yBolinha += velocidadeybolinha;
}

function verificaColisaoBordas(){
    if (xBolinha + raio > width || xBolinha - raio < 0){
    velocidadexbolinha *= -1;
  }
  if ((yBolinha + raio) > height || yBolinha - raio < 0){
    velocidadeybolinha *= -1;
  }
}

Funciona, MAS, se eu troco a função verificaColisaoBordas por:

function verificaColisaoBordas(){
    if (dirBolinha > width || esqBolinha < 0){
    velocidadexbolinha *= -1;
  }
  if ((infBolinha) > height || supBolinha < 0){
    velocidadeybolinha *= -1;
  }
}

A função para de funcionar e a bolinha ultrapassa as bordas para nunca mais voltar. porque ocorre isso neste caso?

Obrigada!