//variable ball
let xBall = 300;
let yBall = 200;
let diameter = 25;
let radius = diameter / 2;  

//variable movement ball
let speedXBall = 8;
let speedYBall = 4;

//variable rect
let xRect = 5;
let yRect = 150;
let widthRect = 15;
let heightRect = 90;

//variable rect2
let xRect2 = 580;
let yRect2 = 150;
let speedYRect2;

//variable colisium rect
let colisium = false 

//variable game score
let myPoint = 0
let opponentPoint = 0

//variable sounds game
let soundRect;
let soundScore;
let soundGame;

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

function setup() {
  createCanvas(600, 400);
  soundGame.loop();
}

function draw() {
background(0);
mostrarBolinha();
movementBall ();
movementBallCollision ();
mostrarRect(xRect, yRect);
movementRect();
colisiumRect();
//colisiumRectBall ();
mostrarRect (xRect2, yRect2);
movimentRect2 ();
colisiumRect2 ();
gameScore ();
score ();
}

function mostrarBolinha () {
  circle(xBall,yBall,diameter);
}

function movementBall () {
   xBall += speedXBall;
  yBall += speedYBall;
}

function movementBallCollision () {
  if (xBall + radius > width || xBall - radius < 0) { 
    speedXBall *= -1;
}
  if (yBall + radius > height || yBall - radius < 0) { 
    speedYBall *= -1;
}
}  

function mostrarRect(x, y) {
    rect(x, y, widthRect, heightRect);
  }

function movementRect (){
  if (keyIsDown(DOWN_ARROW)){
    yRect +=10;
  }
  if (keyIsDown(UP_ARROW)){
    yRect -=10;
  }
 }

function colisiumRect () {
  if (xBall - radius < xRect + widthRect && yBall - radius < yRect + heightRect && yBall + radius > yRect) {
    speedXBall *= -1;
    soundRect.play();
  }
}

function colisiumRect2 () {
  if (xBall + radius * 2 > xRect2 + widthRect && yBall - radius < yRect2 + heightRect && yBall + radius > yRect2) {
    speedXBall *= -1;
    soundRect.play();
  }
}

function colisiumRectBall (){
  colisium = colisiumRect (x, y, widthRect, heightRect, xBall, yBall, radius);
  if (colisium){
    speedXBall *= -1;
    }
}


function movimentRect2 () {
  speedYRect2 = yBall - yRect2 - widthRect / 2 - 93;
  yRect2 += speedYRect2
}

function gameScore (){
  stroke (255);
  textAlign (CENTER);
  textSize(30);
  textStyle(BOLD);
  fill (color (255, 140,0));
  rect (150,10,50,40);
  fill (255);
  text (myPoint, 175, 40);
  fill (color (255, 140,0));
  rect (450,10,50,40);
  fill (255);
  text (opponentPoint, 475, 40);
}

function score (){
  if (xBall > 585)
{myPoint += 1;
 soundScore.play();
 }
  if (xBall < 15)
{opponentPoint += 1;
 soundScore.play();
 }
}

Oi, Alessandro, tudo certo?

Desculpe pela demora a te responder.

Chequei o seu projeto atual e notei que há algumas diferenças entre o código antigo e o novo, vi que inclusive você adicionou uma variável para o término do jogo. Isso foi ótimo, parabéns por se aprofundar e inserir novas coisas no seu projeto! =)

Porém, voltando às perguntas feitas: a primeira resposta é sobre o porquê de acontecer... e é um bug próprio do p5.js mesmo. Já, para resolver, o comum é utilizarmos o seguinte bloco de código:

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

Nele estamos alterando a direção da bolinha tanto para o eixo x quanto para o eixo y, caso ela ultrapasse a altura (no mínimo e no máximo) ou a largura (no mínimo e no máximo). Isso iria impedir a bolinha de sair da tela de execução.

Espero ter ajudado. Se outra dúvida surgir, estou à disposição.

Abraços e bons estudos!