Agora as raquetes não saem mais da tela

Galera, vim compartilhar minha atividade. Se não quiserem usar a biblioteca que o prof mostrou no curso, acho que dá pra 'descomentar' e usar a versão que fizemos durante as aulas.

Ah, como eu sou meio lerdo pra esse tipo de jogo, desacelerei a velocidade e fiz uma 'gambiarra' pro placar contar certo.

Pensei em continuar incrementando funções e elementos estéticos, mas prefiro seguir com os cursos.

// Pong Pong 27 - rfz's take on Pong

// BALL
// let there be a ball!
let diameter = 20;
let radius = diameter / 2;
let xBall = 400;
let yBall = 300;
let xSpeed = 5;
let ySpeed = 5;

function showBall() {
  circle(xBall, yBall, diameter);
}
function moveBall() {
  xBall += xSpeed;
  yBall += ySpeed;

  if (xBall + radius > width || xBall < 10) {
    xSpeed *= -1;
  }

  if (yBall + radius > height || yBall < 10) {
    ySpeed *= -1;
  }
}

// PLAYER
// and now, let there be the player!
let playerWidth = 10;
let playerHeight = 120;
let xPlayer = radius;
let yPlayer = playerHeight * 2;
let corner = 4;
let yPlayerSpeed = 4;

function showPlayer(xPos, yPos) {
  rect(xPos, yPos, playerWidth, playerHeight, corner, corner, corner, corner);
}
function movePlayer() {
  if (keyIsDown(UP_ARROW)) {
    yPlayer -= yPlayerSpeed;
  }
  if (keyIsDown(DOWN_ARROW)) {
    yPlayer += yPlayerSpeed;
  }
}

// OPPONENT
// why would you play against the wall???
let xOpp = 78 * radius;
let yOpp = playerHeight * 2;
let yOppSpeed;

function showOpp() {
  rect(xOpp, yOpp, oppWidth, oppHeight, corner, corner, corner, corner);
}

function moveOpp() {
  yOppSpeed = yBall - radius * 2 - yOpp - playerWidth * 2;
  yOpp += yOppSpeed;
}

// COLLISION
// because yes
/*
function collision(xPos, yPos) {
  if (xBall - radius == (xPos+(playerWidth/2)) && (yBall > yPos) && (yBall < yPos + playerHeight)) {
      xSpeed *= -1;
      }
*/
let hit = false;
function collisionGitHub(xPos, yPos) {
  hit = collideRectCircle(
    xPos,
    yPos,
    playerWidth,
    playerHeight,
    xBall,
    yBall,
    radius
  );
  if (hit) {
    xSpeed *= -1;
  }
}

// SCORE BOARD
let playerScore = 0;
let playerText = 0.4;
let realPScore = 0;
let oppScore = 0;
let oppText = 0.6;
let realOScore = 0;

function scoreBoard(points, textFactor) {
  text(points, width * textFactor, height * 0.1);
  fill(255);
  textSize(40);
}

// SCORE SYSTEM
function scoreSystem() {
  if (xBall - radius == 0) {
    oppScore++;
    realOScore = round(oppScore/2);
  }
  if (xBall + radius == width) {
    playerScore++;
    realPScore = round(playerScore/2);
  }
}

function playerBorderCollision() {
  if (yPlayer <= 0) {
    yPlayer = 0;
  }
  if (yPlayer + playerHeight >= height) {
    yPlayer = height - playerHeight;
  }
}

function oppBorderCollision() {
  if (yOpp <= 0) {
    yOpp = 0;
  }
  if (yOpp + playerHeight >= height) {
    yOpp = height - playerHeight;
  }
}

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(27);
  showBall();
  moveBall();
  showPlayer(xPlayer, yPlayer);
  showPlayer(xOpp, yOpp);
  movePlayer();
  moveOpp();
  //collision(xPlayer, yPlayer);
  //collision()xOpp, yOpp;
  collisionGitHub(xPlayer, yPlayer);
  collisionGitHub(xOpp, yOpp);
  scoreBoard(realPScore, playerText);
  scoreBoard(realOScore, oppText);
  scoreSystem();
  playerBorderCollision();
  oppBorderCollision();
  //bgSound();
}