Ao longo do curso também me deparei com esse "bug" da bolinha presa atrás da raquete ou dentro dela, e apesar das soluções muito boas apresentadas por outros alunos, decidi buscar uma minha. E acredito que encontrei.
Primeiro, no meu entendimento percebi que esse problema ocorria principalmente quando a bolinha batia na "quina" da raquete, pois ali a bolinha colidia com o Y da raquete, e ao mudar de direção podia esbarrar no X da raquete, resultando naquele efeito de deslizar por dentro dela. Coisa semelhante ocorria ao marcar ponto, pois a bolinha ao mudar de direção poderia bater atrás da raquete e pontuar sem parar, pois o X da bolinha ficava preso entre o X da borda e o X da raquete, gerando aquele efeito de zigue-zague.
Para tentar resolver isso, aprimorei a função que o professor utilizou com a biblioteca do p5.collide2D, feita para verificar a colisão da bolinha com a raquete.
Quando a bolinha colidir com a raquete, alterei o X da bolinha para ela apareça um pouco a frente da raquete e assim não volte a colidir logo em seguida.
function verificaColisaoRaqueteOponenteBiblioteca(){
colidiu = collideRectCircle(xRaqueteOponente, yRaqueteOponente, comprimentoRaquete, alturaRaquete, xBola, yBola, raio);
if (colidiu){
velocidadeXBola *= -1
xBola = 580 // altera o X da bolinha para evitar ficar presa na Raquete Oponente
raquetada.play();
}
}
function verificaColisaoMinhaRaqueteBiblioteca(){
colidiu = collideRectCircle(xRaquete, yRaquete, comprimentoRaquete, alturaRaquete, xBola, yBola, raio);
if (colidiu){
velocidadeXBola *= -1
xBola = 20 // altera o X da bolinha para evitar ficar presa na Minha Raquete
raquetada.play();
}
}Da mesma forma, fiz um ajuste na função marcaPonto, ao pontuar também alterei o X da bolinha para evitar colidir com a raquete logo após o ponto. Além disso, deixei a mudança de direção do X da bolinha na marcaPonto, ao invés da verificaColisaoBorda
function marcaPonto(){
if (xBola > 590){
meusPontos += 1;
velocidadeXBola *= -1;
xBola = 580; // evita colidir com a raquete após ponto
ponto.play();
}
if (xBola < 10){
pontosDoOponente += 1;
velocidadeXBola *= -1;
xBola = 20; // evita colidir com a raquete após ponto
ponto.play();
}
}Os valores do xBola calculei de acordo com os valores que deixei nas minhas variáveis das raquetes e da bolinha.
// variáveis da bolinha
let xBola = 300;
let yBola = 200;
let diametro = 18;
let raio = diametro / 2;
// velocidade da bolinha
let velocidadeXBola = 7;
let velocidadeYBola = 7;
// variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let comprimentoRaquete = 10;
let alturaRaquete = 80;
// variáveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYRaqueteOponente;