Configuração Setup

Olá, não estou conseguido configurar as medidas corretas para a bola reconhcer as bordas e a raquete. Segue código:

let xBall = 325;
let yBall = 325;
let diameter = 20;
let velocityXBall = 4;
let velocityYBall = 9;
let xPlayer1 = 1;
let yPlayer1 = 270;
let lengthPlayer1 = 15;
let heightPlayer1 = 100;
let xPlayer2 = 634;
let yPlayer2 = 270;
let lengthPlayer2 = 15; 
let heightPlayer2 = 100;
let lightning = diameter / 2;

function setup() {
  createCanvas(650, 650);
}

function draw() {
  background(0);
  printBall();
  moveBall();
  checkCollision();
  printRect1();
  printRect2();
  moveRect1();
  moveRect2();
  checkCollisionRect1()

}

function printBall(){
  circle (xBall,yBall, diameter );

}

function moveBall (){
  xBall += velocityXBall;
  yBall += velocityYBall;

}

function checkCollision (){
  if (xBall - lightning > width || xBall < -10) {
      velocityXBall *= -1;
} if (yBall - lightning > height || yBall < 15){
      velocityYBall *= -1;

      }

}

function printRect1 (){

  rect(xPlayer1, yPlayer1, lengthPlayer1, heightPlayer1, 10); 
}

function printRect2 (){

  rect(xPlayer2, yPlayer2, lengthPlayer2, heightPlayer2, 10);
}




function moveRect1 (){
  if (keyIsDown(UP_ARROW)) {
    yPlayer1 -= 5;
  }

  if (keyIsDown(DOWN_ARROW)) {
    yPlayer1 += 5;
  }

}

function moveRect2 (){
  if (keyIsDown(UP_ARROW)) {
    yPlayer2 -= 5;
  }

  if (keyIsDown(DOWN_ARROW)) {
    yPlayer2 += 5;
  }

}

function checkCollisionRect1 (){
  if (xBall - lightning < xPlayer1 + lengthPlayer1 && yBall - lightning < yPlayer1 + lengthPlayer1) {
      velocityXBall *= -1;
  } 

}