P5 travando

Pessoal, estou com um problema no meu projeto que ainda não foi solucionado. Comentei há um mês e não obtive respostas. O meu projeto simplesmente não para de travar. Eu fiz tudo corretamente, todos os códigos e números foram devidamente colocados, mas toda vez que eu inicio o jogo começa a engasgar ao ponto de parar completamente. O código do p5.collide2d.js e os arquivos contendo os sons do jogo também foram adicionados corretamente.

Meu código é o seguinte:

//variáveis da bolinha
let xBolinha = 300
let yBolinha = 200
let diametro = 25
let raio = diametro / 2

//velocidade da bolinha
let velocidadeXBolinha = 2
let velocidadeYBolinha = 2

//variáveis da Raquete
let xRaquete = 10
let yRaquete = 150
let raqueteComprimento = 10
let raqueteAltura = 90

//variáveis da raquete do oponente
let xRaqueteOponente = 580
let yRaqueteOponente = 150
let velocidadeYOponente;

//placar do jogo 
let meusPontos = 0;
let pontosDoOponente = 0;

//sons do jogo
let raquetada;
let ponto;
let trilha;

let colidiu = false;

function preload(){
  raquetada = loadSound("raquetada.mp3")
  ponto = loadSound("ponto.mp3")
  trilha = loadSound("trilha.mp3")
}

//mapa do jogo
function setup() {
  createCanvas(600, 400);
  trilha.loop();
}

function draw() {
  background(0);
  mostraBolinha();
  velocidadeBolinha();
  verificaColisaoBolinha();
  mostraRaquete(xRaquete, yRaquete);
  movimentaRaquete();
//verificaColisaoRaquete();
  colisaoRaqueteBolinha(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
//movimentaRaqueteOponente();
  colisaoRaqueteBolinha(xRaqueteOponente, yRaqueteOponente);
  mostraPlacar();
  marcaPonto();
  preload();
}

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

 }

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

function verificaColisaoBolinha(){
  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, raqueteComprimento, raqueteAltura)
}

function movimentaRaquete(){
  if (keyIsDown (UP_ARROW)){
    yRaquete -= 10
  }
  if (keyIsDown (DOWN_ARROW)){
    yRaquete += 10
  }
  yRaquete = constrain (yRaquete, 10, 300)
}

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

function colisaoRaqueteBolinha(x, y){
 colidiu =
  collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, diametro)
  if (colidiu){
     velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteAltura/2;
  yRaqueteOponente += velocidadeYOponente;
  
  yRaqueteOponente = constrain (yRaqueteOponente, 10, 300);
}

function mostraPlacar(){
  stroke(255)
  textAlign (CENTER);
  textSize (14)
  fill (0, 0, 205)
  rect (230, 10, 40, 20)
  fill (255)
  text (meusPontos, 250, 25)
  fill (0, 0, 205)
  rect (330, 10, 40, 20);
  fill (255)
  text (pontosDoOponente, 350, 25)
}

function marcaPonto(){
  if (xBolinha - raio < 0){
  pontosDoOponente += 1;
  ponto.play();
  }
  if (xBolinha + raio > width){
  meusPontos += 1;
  ponto.play();
  }
}

Se alguém puder me dar uma luz eu agradeço!