colissão com a raquete do opononte causa efeito inesperado. (sem biblioteca)

//deixar a colisão com a raquete do oponente no código inibe o movimento do eixo x da bolinha, alem disso a bolinha fica piscando na tela.

//ao deixar como comentario no codigo (assim desativando) a colisão com o a raquete do oponente tudo volta funcionar.

https://editor.p5js.org/math_GL/sketches/0cnGAH9BP

codigo:

//variaveis bolinha

let xBolinha = 300; var yBolinha = 200; let diametro = 20; var velocidadeXBolinha = 6; let velocidadeYBolinha = 6; var raio = diametro /2;

//variaveis raquete

let xRaquete = 5; var yRaquete = 150; let larguraRaquete = 12; var alturaRaquete = 90;

//variaveis raquete oponente

let xRaqueteOp = 584; var yRaqueteOp = 150; let velocidadeOp

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

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

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

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

}

function mostraRaquete(){ rect(xRaquete, yRaquete, 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 < y + raio + alturaRaquete && yBolinha > y - raio){ xBolinha *= -1 } }

function mostraRaqueteOp(){ rect(xRaqueteOp, yRaqueteOp, larguraRaquete, alturaRaquete); }

function movimentaRaqueteOp(){ velocidadeOp = yBolinha - larguraRaquete /2 -30 yRaqueteOp = velocidadeOp }

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

function draw() { background(0);

mostraBolinha();
movimentaBolinha();
verificaColisaoBorda();

mostraRaquete();
movimentaRaquete();
colisaoRaquete(xRaquete, yRaquete);

mostraRaqueteOp();
movimentaRaqueteOp();
//colisaoRaquete(xRaqueteOp, yRaqueteOp);

}