Boa noite (ou dia, ou tarde), espero que estejam bem!

Meu jogo funciona perfeitamente, tal qual o do professor nos vídeos, PORÉM, tem uma coisa que está me matando lentamente, a bolinha entrando parcialmente na raquete! Se você segue o código na íntegra, a bolinha entrará tanto na parede quando na raquete de vez em quando, caracterizando, ao meu ver, uma colisão imperfeita. A parede, consegui resolver criando um parâmetro de offset que, antes de a bolinha se mover, é calculada um valor que se a bolinha entraria na parede, ele ajusta o próximo movimento. Com a raquete, porém, não consegui implementar a mesma lógica, já que ela não é estática e não tenho como determinar se a raquete estará ou não no próximo frame no lugar de colisão.

Alguém tem uma solução da "Colisão Imperfeita com a Raquete"?

Deixo meu código:

let xCanva = 800;
let yCanva = 450;
let xBall = xCanva/2;
let yBall = yCanva/2;



let dBall = 30;
let xspdBall = -13
let yspdBall = -13

let yspdP1 = 15; 


let xoffset = 0;
let yoffset = 0;

let xP1 = xCanva/50;
let yP1 = yCanva/2;
let hP1 = yCanva/7;
let wP1 = xCanva/95;

let hit = false;




function setup() {
  createCanvas(xCanva, yCanva);
  frameRate(30);
}

function draw() {
background(0);

movePlayers();
showP1();
showBall();
colisionwall();
//colisionP1();
colisionP1Lib();
moveBall();


}


// Fazendo a refatoração


function movePlayers(){
  if (keyIsDown( UP_ARROW)) {
        if(yP1-yspdP1 < 10) {yP1 = 5} else yP1-=yspdP1
    } else
    if (keyIsDown(DOWN_ARROW)) {
        if(yP1+yspdP1 > yCanva-hP1-10) {yP1 = yCanva-hP1-5} else yP1+=yspdP1
    }
}

function showP1(){
rect(xP1,yP1, wP1, hP1);
}

function showBall(){
circle(xBall,yBall,dBall);
}

function colisionwall(){
  //Fazer usando o width e o height que denominam o tamanho da tela
if (xBall+0.5*dBall>=width || xBall-0.5*dBall<=0) {xspdBall*=-1};
if (yBall+0.5*dBall>=height|| yBall-0.5*dBall<=0) {yspdBall*=-1};

//fazendo o offset para fazer com que a bolinha nunca entre na parede
xoffset=0;
yoffset=0;
if (xBall + 0.5*dBall + xspdBall >= width) {xoffset = xspdBall - (width - xBall-0.5*dBall)};
if (xBall - 0.5*dBall + xspdBall <= 0) {xoffset = xspdBall+xBall-0.5*dBall};

if (yBall + 0.5*dBall + yspdBall >= height) {yoffset = yspdBall - (height - yBall-0.5*dBall)};
if (yBall - 0.5*dBall + yspdBall <= 0) {yoffset = yspdBall+yBall-0.5*dBall};
}

function colisionP1Lib(){

  hit = collideRectCircle(xP1, yP1, wP1, hP1, xBall, yBall, dBall/2);

  if (hit){xspdBall*=-1};

}


function colisionP1(){

  if (xBall-dBall/2 <= xP1+wP1*2 && yBall-dBall/2<=yP1+hP1 && yBall+dBall/2>=yP1)
  {xspdBall*=-1};
  console.log(xP1+wP1,xBall-dBall/2)
}

function moveBall(){
xBall += xspdBall - xoffset;
yBall += yspdBall - yoffset;
}