[Projeto] Jogo do Pong em JS - Finalizado

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


//Criando função para carregar os sons
function preload() {
  raquetada = loadSound("raquetada.mp3");
  ponto = loadSound("ponto.mp3");
  trilha = loadSound("trilha.mp3");
}

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

function draw() {
  background(0);
  mostrabolinha();
  movimentabolinha();
  verificacolisaoborda();
  criarraquete(xraquete,yraquete);
  moverraquete();
  //colisaoraquete();
  verificacolisaoraquete(xraquete,yraquete);
  verificacolisaoraquete(xraqueted,yraqueted);
  criarraquete(xraqueted, yraqueted);
  movimetaraqueted();
  limiteBordaSuperior(); 
  limitebordainferior(); 
  limiteBordaSuperiord();
  limitebordainferiord(); 
  incluiPlacar();
  marcaPonto();
}

//Criando variáveis para assumir a posição do círculo
let xBolinha = 100;
let yBolinha = 200;
let dBolinha = 13;

//Fazendo com que a bolinha não considere o valor x como o centro do raio.Raio = diamentro/2
let raio = dBolinha / 2;

//Criando a variável para assumir a velocidade da bolinha
let velocidadexBolinha = 6;
let velocidadeyBolinha = 6;

//Criando a função para mostrar a bolinha
function mostrabolinha (){
  fill(255);
  circle(xBolinha, yBolinha, dBolinha);
}

//Criando a função para movimentar a bolinha
function movimentabolinha(){
  xBolinha += velocidadexBolinha;
  yBolinha += velocidadeyBolinha;
}

//Criando a função para verificar quando a bolinha toca a borda
function verificacolisaoborda() {
  //Verificar se a bolinha toca a borda
  if(xBolinha + raio > width || xBolinha - raio < 0) {
    velocidadexBolinha *= -1;
  }  
  if(yBolinha + raio > height || yBolinha - raio < 0 ){
    velocidadeyBolinha *= -1;
  }
}

//Criando a variável para assumir a posição da raquete esquerda
let xraquete = 1;
let yraquete = 150;
let comprimraquete = 10;
let alturaraquete = 90;

//Criando a função para criar a raquete da esquerda
function criarraquete (x,y) {
  fill(0,255,127)
  rect(x,y, comprimraquete, alturaraquete);
}

//Criando a função para mover a raquete da esquerda
function moverraquete() {
    if (keyIsDown(UP_ARROW)) {

      if (limiteBordaSuperior()) {
        yraquete -= 10;
      }
    }

    if (keyIsDown(DOWN_ARROW)) {
      if(limitebordainferior()) {
        yraquete += 10;
      }
    }
}

//Criando as funções Limites --> Ao pesquisar como limitar as bordas, encontrei a orientação com CARLOS VINICIOS DE SOUZA BARROS
 function limiteBordaSuperior(){
    return  yraquete > 0
  }

function limitebordainferior (){
   return yraquete + alturaraquete < 400;
}

//Criando a variável para assumir a posição da raquete direita
let xraqueted = 590;
let yraqueted = 150;

//Outra raquete
function limiteBordaSuperiord(){
    return  yraqueted > 0
  }

function limitebordainferiord (){
   return yraqueted + alturaraquete < 400;
}

//Criando a variavel para assumir a velocidade da raquete da direita
let velocidadeyraqueted;

//Criando função para criar a raquete da direita
//function criarraqueted () {
//  rect(xraqueted, yraqueted, comprimraquete, alturaraquete);
//}

//Criando a função para movimentar a raquete da direita
function movimetaraqueted(){
       if (keyIsDown(87)) {

      if (limiteBordaSuperiord()) {
        yraqueted -= 10;
      }
    }

    if (keyIsDown(83)) {
      if(limitebordainferiord()) {
        yraqueted += 10;
      }
    }
}

//Criando a variável colisao e atribuindo o valor inicial como falso
let colisao = false;
let colisaod = false;

//função herdada da biblioteca p5.collide2d.js
function verificacolisaoraquete(x,y) {
  colisao = collideRectCircle(x, y, comprimraquete, alturaraquete, xBolinha, yBolinha, raio);

  if(colisao) {
    velocidadexBolinha *= -1;
    raquetada.play();
  }
}

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

//Criando a função do placar
function incluiPlacar() {
    textAlign(CENTER);
    textSize(16);
    fill(color(255, 204, 0));
    rect(130,10,40,20);
    stroke(color(255));


    fill(color(0));
    text(meusPontos, 150, 26);

    fill(color(255, 204, 0));
    rect(430, 10,40,20);

    fill(color(0));
    text(pontosDoOponente, 450, 26);
}

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