Tentei deixar as raquetes com cores diferentes, mas algo deu errado.

Boa tarde, pessoal. Tentei atribuir cores diferentes às raquetes. Desmembrei o código que atribuía cor RGB em dois (branco e vermelho), mas só o meu placar permanece branco. A bolinha e ambas as raquetes ficaram vermelhas. Alguém poderia me ajudar? Eu queria deixar a minha raquete e o meu placar em branco e a raquete e o placar do adversário em vermelho. Obrigado.

// Parâmetros Bolinha
let xBolinha = 300;
let yBolinha = 200;
let dBolinha = 10;
let raio = dBolinha / 2;

// Velocidade Bolinha
let velXBolinha = 5;
let velYBolinha = 3;

// Parâmetros Raquete 1
let xRqt1 = 20;
let yRqt1 = 200;
let larguraRqt = 5;
let alturaRqt = 35;

// Parâmetros Raquete 2
let xRqt2 = 580;
let yRqt2 = 200;
let velYRqt2; 

// Variáveis colisão
let colisao = false;

// Placar Jogo
let pontosJ1 = 0;
let pontosJ2 = 0;

// Parâmetros da tela
function setup() {
  createCanvas(600, 400);
}

// Chamar funções necessárias à execução do jogo

function draw() {
  background(0);
  mostraBola();
  movimentaBola();
  verificaColisao();
  mostraRqt(xRqt1, yRqt1);
  mostraRqt(xRqt2, yRqt2);
  movimentoRqt1();
  colisaoRqt1();
  colisaoRqtLib(xRqt1, yRqt1);
  movimentoRqt2();
  colisaoRqtLib(xRqt2, yRqt2);
  placarJ1();
  placarJ2();
  marcarPonto();

}

// Exibir bolinha

function mostraBola(){
  circle(xBolinha, yBolinha, dBolinha);
}

// Movimentação da bolinha

  function movimentaBola(){
  xBolinha += velXBolinha;
  yBolinha += velYBolinha;
}
// Colisão da bolinha com as paredes

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

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

}
// Exibir raquetes

function mostraRqt(x, y){
  rect(x, y, larguraRqt, alturaRqt);
}

// Movimentação da raquete 1

function movimentoRqt1(){
  if (keyIsDown(UP_ARROW)){
    yRqt1 -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRqt1 += 10;
  }

}

// Colisão da bolinha com a raquete 1: descrever função explicitada anteriormente, nos eixos x e y - para ela bater na parte exterior da bola, e não no centro.

function colisaoRqt1(){
  if (xBolinha - raio < xRqt1 + larguraRqt && yBolinha - raio < yRqt1 + alturaRqt && yBolinha + raio > yRqt1)
    velXBolinha *= -1
}


// Colisão da bolinha com a raquete e alterando a direção - com função importada do GitHub

function colisaoRqtLib(x, y){
  colisao = 
  collideRectCircle(x, y, larguraRqt, alturaRqt, xBolinha, yBolinha, raio);
  if (colisao){
    velXBolinha *= -1;
  }
}

function movimentoRqt2(){
  velYRqt2 = yBolinha - yRqt2 - alturaRqt/2 -24;
  yRqt2 += velYRqt2;
}

function placarJ1(){
  fill(255, 255, 255);
  text(pontosJ1, 278, 26);

}
function placarJ2(){
  fill(204, 0, 0);
  text(pontosJ2, 321, 26);
}
function marcarPonto(){
  if(xBolinha > 598){
   pontosJ1 += 1; 
  }
  if(xBolinha < 5){
    pontosJ2 += 1;
  }
}