[Projeto] Pong JS

Olá pessoal, tudo bem? Estou compartilhando com vocês o projeto do pong em js, eu fiz algumas alterações do que é mostrado no curso, como por exemplo a execução da colissão, fiz isso mais para me desafiar e mostrar que é possivel chegar no mesmo resultado utilizando outros caminhos :)

//variaveis bolinha
let xBolinha = 300;
let yBolinha = 200;
let dBolinha = 20;
let rBolinha = dBolinha/2;

//velocidade da bolinha
let vxBolinha = 5;
let vyBolinha = 5;

//variaveis raquete
let xRaquete = 10;
let yRaquete = 150;
let cRaquete = 10;
let hRaquete = 100;

//variaveis raquete oponente
let xRaqueteO = 580;
let yRaqueteO = 150;
let vOponente;

//placar
let meusPontos = 0;
let pontosOponente = 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);
  mostraBolinha();
  movBolinha();
  bordas();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteO, yRaqueteO);
  movRaquete();
  colissaoRaquete();
  colissaoRaqueteO();
  movimentaRaqueteO();
  incluiPlacar();
  marcaPonto();


}  

  function mostraBolinha(){

    circle(xBolinha, yBolinha, dBolinha);
  }

  function movBolinha(){

    xBolinha += vxBolinha;
    yBolinha += vyBolinha;
  }

  function bordas(){    
    if (xBolinha + rBolinha > width || xBolinha - rBolinha < 0){

    vxBolinha *= -1;
  }

  if (yBolinha + rBolinha > height || yBolinha - rBolinha < 0){

    vyBolinha *= -1;
  }

}
  function mostraRaquete(x, y){
    rect(x, y, cRaquete, hRaquete);
  }


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

  function colissaoRaquete(){
    if (xBolinha - rBolinha < xRaquete + cRaquete && yBolinha - rBolinha < yRaquete + hRaquete && yBolinha + rBolinha > yRaquete){
    raquetada.play();
    vxBolinha *= -1;
  }
  }
  function colissaoRaqueteO(){
    if (xBolinha + rBolinha > xRaqueteO && yBolinha - rBolinha < yRaqueteO + hRaquete && yBolinha + rBolinha > yRaqueteO){
    raquetada.play();
    vxBolinha *= -1;
  }  

  }

  function movimentaRaqueteO(){
    vOponente = yBolinha - yRaqueteO - cRaquete / 2 - 100;
    yRaqueteO += vOponente;
  }

  function incluiPlacar(){
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255, 140, 0));
    rect(150, 10, 40, 20);
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(255, 140, 0));
    rect(450, 10, 40, 20);
    fill(255);
    text(pontosOponente, 470, 26);
  }

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

O link do scratch está aqui também!

https://scratch.mit.edu/projects/758525173/

Acho que dá pra fazer algo ainda mais interessante, como movimentar as raquetes horizontalmente até um limite como por exemplo 1/4 da tela, afinal em um jogo de ping-pong, você precisa se movimentar com a raquete para frente e para trás. Acho que para fazer a raquete se movimentar para frente e para trás é bem simples, usando o codigo

  function movRaquete(){
    if (keyIsDown (UP_ARROW) ) {
      yRaquete -= 10;
    }
    if (keyIsDown(DOWN_ARROW)){
      yRaquete += +10;
    }
    if (keyIsDown (LEFT_ARROW) ) {
      xRaquete -= 10;
    }
    if (keyIsDown(RIGHT_ARROW)){
      xRaquete += +10;
  }

Mas o grande desafio é programar a colisão em outros pontos na cordenada x hehehe, obrigado pela atenção!