Meu Projeto Final!

Personalizei um pouco os elementos presentes no jogo para deixar mais com meu estilo!

//Variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;

let diametroBolinha = 20;
let raioBolinha = diametroBolinha/2;

let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//Variáveis das Raquetes
let dimensaoXRaquete = 10;
let dimensaoYRaquete = 100;
let raioDaBorda = 4;

let velocidadeRaquetePlayer = 10;
let velocidadeRaqueteBot = 10;

let xRaquetePlayer = 3;
let yRaquetePlayer = 150;

let xRaqueteBot = 587;
let yRaqueteBot = 150;

let colidiuPlayer = false;
let colidiuBot = false;

let chanceDeErrar = 0;

//Placar do jogo
let pontosPlayer = 0;
let pontosBot = 0;

//Sons do jogo
let raquetada;
let pontoPlayer;
let pontoBot;
let tilha;

function preload(){
  trilha = loadSound("sons/backgroundMusic.mp3");
  raquetada = loadSound("sons/raquetada.mp3");
  pontoPlayer = loadSound("sons/pontoPlayer.mp3");
  pontoBot = loadSound("sons/pontoOponente.mp3");
}

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

function draw() {

  desenhaQuadra();

  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();

  mostraRaquetePlayer();
  mostraRaqueteBot();

  movimentaRaquetePlayer();
  movimentaRaqueteBot();

  //verificaColisaoPlayer();
  //verificaColisaoBot();

  verificaColisaoRaquete(xRaquetePlayer, yRaquetePlayer);
  verificaColisaoRaquete(xRaqueteBot, yRaqueteBot);

  incluiPlacar();
}

function desenhaQuadra(){
    background(0, 0, 70);
    fill(0,0,70)
    circle(300, 200, 150);
    fill('white')
    circle(300, 200, 10);
    line(300, 0, 300, 400);
}

function mostraRaquetePlayer(){
    rect(xRaquetePlayer,yRaquetePlayer,dimensaoXRaquete,dimensaoYRaquete, raioDaBorda);

}

function mostraRaqueteBot(){
    rect(xRaqueteBot,yRaqueteBot,dimensaoXRaquete,dimensaoYRaquete, raioDaBorda);
}

function mostraBolinha(){
  circle(xBolinha,yBolinha,diametroBolinha);
}

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

function verificaColisaoBorda(){
    //Colisao com a borda direita
    if(xBolinha > width-raioBolinha){
      velocidadeXBolinha  *= -1;
      pontosPlayer++;
      pontoPlayer.play();
     }

    //Colisao com a borda direita
    if(xBolinha < 0 + raioBolinha){
      velocidadeXBolinha  *= -1;
      pontosBot++;
      pontoBot.play();
     }

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

function movimentaRaquetePlayer(){
  if(keyIsDown(UP_ARROW)){
    yRaquetePlayer -= velocidadeRaquetePlayer;
  }
  if(keyIsDown(DOWN_ARROW)){
    yRaquetePlayer += velocidadeRaquetePlayer;
  }
}

function movimentaRaqueteBot(){

  velocidadeRaqueteBot = yBolinha - yRaqueteBot -(dimensaoYRaquete/2) - 30;

  yRaqueteBot += velocidadeRaqueteBot + chanceDeErrar;

  calculaChanceDeErrar();
}

function calculaChanceDeErrar() {

  if (pontosBot >= pontosPlayer) {

    chanceDeErrar += random(0,1);

    if(chanceDeErrar >= 100){
      chanceDeErrar = 100;
    }
  } 
  else {
    chanceDeErrar -= random(0,1);
    if(chanceDeErrar <= 0){
      chanceDeErrar = 0;
    }
  }
}

function verificaColisaoPlayer(){
  if(xBolinha - raioBolinha < xRaquetePlayer + dimensaoXRaquete &&            yBolinha - raioBolinha < yRaquetePlayer + dimensaoYRaquete &&
     yBolinha - raioBolinha > yRaquetePlayer
    ){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function verificaColisaoBot(){
  if(xBolinha + raioBolinha > xRaqueteBot &&
     yBolinha - raioBolinha < yRaqueteBot + dimensaoYRaquete &&
     yBolinha - raioBolinha > yRaqueteBot){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}

function verificaColisaoRaquete(x, y){
  colidiuPlayer = collideRectCircle(x, y, dimensaoXRaquete, dimensaoYRaquete, xBolinha, yBolinha, raioBolinha);

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

    console.log(chanceDeErrar);
  }
}

function incluiPlacar(){
  textAlign(CENTER)
  textSize(20);
  stroke('white')
  fill(0, 0, 70)
  rect(130, 10, 40, 20, raioDaBorda)
  fill('white')
  text(pontosPlayer,150, 27);
  fill(0, 0, 70)
  rect(430, 10, 40, 20, raioDaBorda)
  fill('white')
  text(pontosBot, 450, 27)
}