Pong Multiplayer

Link do jogo: https://editor.p5js.org/drianomelo/sketches/njHO644s-

//variáveis da bola
let xBola = 300;
let yBola = 200;
let diametroBola = 20;
let raioBola = diametroBola/2;

//velocidades da bola
let velocidadeXBola = 5;
let velocidadeYBola = 5;

//variáveis da minha raquete
let xRaquete = 5;
let yRaquete = 150;

//variáveis da raquete do oponente
let xRaqueteOp = 585;
let yRaqueteOp = 150;

let compRaquete = 10;
let altRaquete = 90;

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

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

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);

  mostraBola();
  movimentaBola();
  verificaColisaoBorda();

  mostraRaquete(xRaquete, yRaquete,"gold");
  mostraRaquete(xRaqueteOp, yRaqueteOp,"khaki");
  movimentaRaquetes();

  verificaColisaoRaquetes();

  incluiPlacar();
}

function mostraBola(){

  fill("coral");
  circle(xBola, yBola, diametroBola);

}

function movimentaBola(){

  xBola += velocidadeXBola;
  yBola += velocidadeYBola;

}

function verificaColisaoBorda(){

  if(xBola + raioBola > width){

    velocidadeXBola *= -1;
    meusPontos++;
    ponto.play();

  } 

  if(xBola - raioBola < 0){

    velocidadeXBola *= -1;
    pontosDoOponente++;
    ponto.play();

  }

  if(yBola + raioBola > height || yBola - raioBola < 0){

    velocidadeYBola *= -1;

  }

}

function mostraRaquete(x, y, cor){

  fill(cor);
  rect(x, y, compRaquete, altRaquete);

}


function movimentaRaquetes(){

  //movimenta a raquete da esquerda
  if(keyIsDown(87)) {
    yRaquete -= 10;
  }

  if(keyIsDown(83)) {
    yRaquete += 10;
  }

  //movimenta raquete da direita
  if(keyIsDown(UP_ARROW)) {
    yRaqueteOp -= 10;
  }

  if(keyIsDown(DOWN_ARROW)) {
    yRaqueteOp += 10;
  }

}

function verificaColisaoRaquetes(){

  if(xBola - raioBola < xRaquete + compRaquete && yBola - raioBola < yRaquete + altRaquete && yBola + raioBola > yRaquete){

    velocidadeXBola *= -1;
    raquetada.play();

  }

   if(xBola + raioBola > xRaqueteOp && yBola - raioBola < yRaqueteOp + altRaquete && yBola + raioBola > yRaqueteOp){

    velocidadeXBola *= -1;
    raquetada.play();

  }

}

function incluiPlacar(){

  stroke("darkorange");
  fill("orange");
  rect(126, 5, 50, 30, 10);
  fill("orange");
  rect(426, 5, 50, 30, 10);
  textAlign(CENTER);
  textSize(16);
  fill(255);
  text(meusPontos, 150, 26);
  text(pontosDoOponente, 450, 26)


}