Bolinha não sai do meio após criar a colisão com a raquete do oponente | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Após implementar a verificação da colisão da bolinha com a raquete oponente, a bolinha ela fica se movimentando apenas no eixo y e fazendo um movimento de zigue-zague no eixo x fizando sempre centralizada, eu não usei a forma de verificação de colisão pela biblioteca e sim manualmente, para fixar esse erro eu preciso mudar meu código utilizando a biblioteca citada na aula? Se eu não precisar adicionar a biblioteca como eu poderia arrumar?

Esse é o meu código:

`let xBolinha = 300; let yBolinha = 200; let diametro = 25; let raio = diametro / 2;

let velocidadeX = 8; let velocidadeY = 8;

let xRaquete = 5; let yRaquete = 150; let comprimentoRaquete = 10; let alturaRaquete = 90;

let xRaqueteOponente = 585; let yRaqueteOponente = 150; let velocidadeYOponente;

function setup() { createCanvas(600, 400); }

function mostraBolinha(){ circle(xBolinha, yBolinha, diametro); }

function movimentaBolinha(){ xBolinha += velocidadeX; yBolinha += velocidadeY; }

function verificaColisaoBorda(){ if(xBolinha + raio >= width || xBolinha - raio <= 0){ velocidadeX *= -1; }

if(yBolinha + raio >= height || yBolinha - raio <= 0){ velocidadeY *= -1; } }

function mostraRaquete(x, y){ rect(x, y, comprimentoRaquete, alturaRaquete); }

function movimentaMinhaRaquete(){ if (keyIsDown(UP_ARROW)){ yRaquete -= 10; }

if (keyIsDown(DOWN_ARROW)){ yRaquete += 10; } }

function movimentaRaqueteOponente(){ velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete / 2 - 30; yRaqueteOponente += velocidadeYOponente; }

function verificaColisaoRaquete(x, y){ if (xBolinha - raio < x + comprimentoRaquete && yBolinha - raio < y + alturaRaquete && yBolinha + raio > y){ velocidadeX *= -1; } }

function verificaColisaoRaqueteOponente(){ if (xBolinha - raio < xRaqueteOponente + comprimentoRaquete && yBolinha - raio < yRaqueteOponente + alturaRaquete && yBolinha + raio > yRaqueteOponente){ velocidadeX *= -1; } }

function draw() { background(0); mostraBolinha(); movimentaBolinha(); verificaColisaoBorda(); mostraRaquete(xRaquete, yRaquete); movimentaMinhaRaquete(); verificaColisaoRaquete(xRaquete, yRaquete); mostraRaquete(xRaqueteOponente, yRaqueteOponente); movimentaRaqueteOponente(); verificaColisaoRaqueteOponente(); } `

Bom dia Davi!

comentando as funções que verificam colisões, executadas sua função draw(), verifiquei que o problema está na função verificaColisaoRaqueteOponente().

Corrigindo ela, fica assim:

function verificaColisaoRaqueteOponente() {
  if (xBolinha + raio > xRaqueteOponente && yBolinha - raio < yRaqueteOponente + alturaRaquete && yBolinha + raio > yRaqueteOponente) {
    velocidadeX *= -1;
  }
}

o problemas que identifiquei:

na primeira operação do if, você estava comparando o x da bolinha MENOS o raio, quando na verdade, como a raquete do oponente está do lado direito da tela, esta comparação teria que ser xBolinha + raio
ainda na primeira operação do if, você estava utilizando operador MENOR "<**", porém como na verdade a bolinha tem que "passar" do x da raquete, a comparação tem que ser MAIOR ">**"
Outra questão que identifique, você somou o x da raquete, com o comprimento dela, porém como na criação de um retângulo, a coordenada "x" dele fica no canto esquerdo, portando para analisar a colisão, não se deve somar o comprimento, senão você vai estar conferindo na verdade a borda da direita do retângulo

Não sei se consegui ser claro rs, me avisa se deu para entender tudo direitinho, qualquer dúvida mande aqui!