Código JS - Pong

Olá, Nancy! Espero que esteja tudo bem com você!

Copiei seu projeto e rodei no meu p5 mas aparecia somente a tela de "Loading", não carregava de jeito nenhum. Depois observei sue código com mais atenção e pude verificar que havia algumas variáveis com nomes diferentes e outra estava com um valor adicional, também faltava inserir o método color dentro de fill (para que assim a visualização do placar ocorresse).

Dessa forma, fiz algumas modificações e o seu código funcionou muito bem, vou deixar no próximo post

Você poderia testá-lo para ver se funciona ?

No entanto, não entendi a questão de alterar a ordem dos operadores. Foi apenas essa troca que você fez e o código funcionar?

Porque essa disposição em forma de seta (=>) faz referência ao que chamamos de Arrow Functions em JavaScript (que nada mais é do que uma forma menos verbosa de escrever funções), e não aos operadores da linguagem.

Vou deixar aqui dois links para artigos que aprofundam mais essas duas questões.

Operadores em JavaScript - MDN

Arrow Functions - MDN

Espero que tenha ajudado com as informações!

Continue compartilhando seu progresso e suas dúvidas conosco, é a partir dessa postura que você irá aprofundar ainda mais seu conhecimento.

Um grande abraço e bons estudos!

//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2;

//velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90

//variaveis da raquete oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;

let chanceDeErrar = 0; //alterei para 0

//placar do jogo
let meusPontos = 0; 
let pontosDoOponente = 0; //alterei nome para que ficasse igual ao restante do código

let colidiu = false

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

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

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostrarRaquete(xRaquete, yRaquete);
  mostrarRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaMinhaRaquete();
  //verificaColisaoRaquete();
  verificaColisaoRaquete(xRaquete, yRaquete);
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
  movimentaRaqueteOponente();
}

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

}

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

function verificaColisaoBorda(){

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

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

function mostrarRaquete(x , y){
  rect (x,y, raqueteComprimento, raqueteAltura);
}


function movimentaMinhaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
}

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

function verificaColisaoRaquete(x, y){
  colidiu = 
  collideRectCircle(x, y, raqueteComprimento, raqueteAltura,xBolinha, yBolinha, raio);

  if (colidiu){
   velocidadeXBolinha *= -1;
   raquetada.play();
  }
}


function movimentaRaqueteOponente(){
    velocidadeYOponente = yBolinha -yRaqueteOponente - raqueteComprimento / 2 - 30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar

  calculaChanceDeErrar();
  //yRaqueteOponente += chanceDeErrar
}

function incluiPlacar(){
  stroke(255);
  textAlign(CENTER);
  textSize(18);

  fill(color(255, 40, 0)); //inseri o método color, pois estava alterando a visualização
  rect(150, 10, 40, 20);
  fill(255);
  text(meusPontos, 170, 26);

  fill(color(255, 40, 0)); inseri o método color, pois estava alterando a visualização
  rect(450, 10, 40, 20);
  fill(255);
  text(pontosDoOponente, 470, 26)// modifiquei novamente o nome da variável
}

function marcaPonto(){
  if (xBolinha > 590){
    meusPontos +=1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosDoOponente +=1;
    ponto.play();
  }
}

function calculaChanceDeErrar() {
  if (pontosDoOponente >= meusPontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 41
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}