O jogo está funcionando bem até o momento. O problema é que quando acontece a colisão entre a bolinha e a raquete pela parte "de cima" ou "de baixo" dela, a bolinha "agarra" no interior da raquete.
Eu já imagino até onde está o problema (na função verificaColisaoRaquete). O xBolinha-raio se torna menor que o xRaquete + raqueteComp, mas como a colisão se deu por cima, ele acaba ficando confinado dentro da raquete até sair do outro lado. É um pequeno bug, mas estou tentando pensar em uma forma de corrigir. Alguém poderia propor uma ideia e explicar o código da correção para mim?
Segue o código abaixo:
//Variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 26;
let raio = diametro/2;
let velocidadeXBolinha = 2;
let velocidadeYBolinha = 2;
//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComp = 20;
let raqueteAlt = 90;
let colidiu = false;
//variáveis do oponente
let xRaqueteOponente = 575;
let yRaqueteOponente = 150;
let velocidadeYOponente;
//Aqui eu defino o que é a Bolinha:
function mostraBolinha (){
circle (xBolinha, yBolinha, diametro);
}
//Aqui eu defino o movimento da Bolinha:
function movimentaBolinha (){
xBolinha += velocidadeXBolinha;
yBolinha += velocidadeYBolinha;
}
//Aqui defino o que são as raquetes:
function mostraRaquete (x, y){
rect (x, y, raqueteComp, raqueteAlt);
}
//Aqui defino o movimento da Raquete:
function movimentaMinhaRaquete (){
if (keyIsDown(UP_ARROW)){
yRaquete -=10;
}
if (keyIsDown(DOWN_ARROW)){
yRaquete +=10;
}
}
//Aqui defino o movimento do Oponente.
function movimentaOponente (){
velocidadeYOponente = yBolinha -yRaqueteOponente -raqueteComp /2 - 30;
yRaqueteOponente += velocidadeYOponente;
}
//Aqui é verificada a colisão da raquete:
function verificaColisaoRaquete(){
if (xBolinha - raio < xRaquete + raqueteComp && yBolinha - raio < yRaquete + raqueteAlt && yBolinha + raio > yRaquete){
velocidadeXBolinha *= -1;
}
}
//Aqui eu defino a colisão das bordas da tela:
function colisaoBorda () {
//Aqui é criado a colisão na horizontal, eixo X, com as paredes.
if (xBolinha > width-raio ||
xBolinha < raio){
velocidadeXBolinha *= -1;
}
//Aqui é criado a colisão vertical, eixo Y, com o teto e o chão.
if (yBolinha > height-raio ||
yBolinha < raio){
velocidadeYBolinha *= -1;
}
}
//Aqui é criada as dimensões da "tela" que será trabalhada.
function setup() {
createCanvas(600, 400);
}
//Aqui se cria todas as funções.
function draw() {
background(0);
mostraBolinha();
movimentaBolinha();
mostraRaquete(xRaquete, yRaquete);
movimentaMinhaRaquete();
colisaoBorda ();
verificaColisaoRaquete ();
colisaoRaqueteBiblioteca(xRaquete, yRaquete);
mostraRaquete(xRaqueteOponente,yRaqueteOponente);
movimentaOponente ();
colisaoRaqueteBiblioteca(xRaqueteOponente, yRaqueteOponente);
}
//Aqui crio a colisão baixada da biblioteca
function colisaoRaqueteBiblioteca (x, y){
colidiu =
collideRectCircle(x,y,raqueteComp,raqueteAlt,xBolinha,yBolinha,raio);
if (colidiu){
velocidadeXBolinha *= -1;
}
}
