Minha solução para a bolinha presa atrás da raquete

Função para verificar a colisão da bolinha com a borda: Apenas defini que, quando a extremidade da bolinha(centro + raio), for igual a qualquer um dos limites do canvas, a bolinha deve voltar. Isso porque, quando usamos maior(>) ou menor(<), parece ser computada mais um ou mais dois, a depender da velocidade da bolinha, isso faz o centro da bolinha ficar preso atrás do limite cartesiano do canvas, ou quase isso, e gera um bug, principalmente quando atinge a parte de trás da raquete . Mas não é só isso...

function verificaColisaoBorda(){
     if(xBolinha + raio == width || xBolinha - raio == 0){
           velocidadeXBolinha *= -1;
     }
      if(yBolinha + raio == height || yBolinha - raio == 0){
            velocidadeYBolinha *= -1;
     } 
}

Função para verificar a colisão da bolinha com a raquete: Eu optei por utilizar a biblioteca sugerida pelo professor em aula. Com a função "collideRectCircle()" da biblioteca "p5.collide2d.js". Apenas somei ao raio da bolinha, passada para a função "collideRectCircle()", à largura das raquetes, porque observei que a extremidade da bolinha colidia com a face oposta da raquete. Parecendo que a bolinha entra na raquete.

 function verificarColisaoRaquete(x, y){
      colisao = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha,( raio+raqueteComprimento));/* Para corrigir o toque da bolinha*/
          if(colisao){
                velocidadeXBolinha *= -1;
                raquetada.play();
        }
    }

Minha solução para o problema da bolinha presa atrás da raquete foi construir uma condicional que verifica a posição do centro da bolinha em relação ao plano cartesiano do canvas. Como quando a bolinha toca a face da raquete, seu centro deve estar a pelo menos 30 (unidades) de distância da borda; 5(unidades) da borda ao fundo da raquete, 10(unidades) da largura da raquete, 15(unidades) de raio da bola. Se a posição do centro da bolinha for maior ou menor que estas 30(unidades), dependendo do lado em que ela está, o centro da bolinha pode estar atrás de uma das raquetes e deve ser reposicionado à 5(unidades) em relação a raquete. Coloco esta condicional dentro da condicional que vai verificar a colisão, porque quero que a bolinha somente seja reposicionada se houver toque com a raquete.

 function verificarColisaoRaquete(x, y){
      colisao = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha,( raio+raqueteComprimento));
          if(colisao){
              if(xBolinha >= 570){
                    xBolinha = 565; 
              } 
              if(xBolinha <= 30){
                    xBolinha = 35;
              }
                velocidadeXBolinha *= -1;
                raquetada.play();
          }
    }

É muito simples mas funcionou, pelo menos para mim. O bug parece ocorrer porque o código está funcionando, em partes, como deveria funcionar. Quando o centro da bolinha esta atrás da raquete, ele retorna e bate contra o ponto que esta definida para colisão na raquete, então ele volta e bate contra o seu limite em relação a borda, o código faz o que tem que fazer e manda o centro da bolinha pro outro lado, repetidamente até bugar. Ps.:EU ACHO!!! Aqui o link para o código completo. Código comentado aqui