Oii, tudo bem por aí?

Para considerar a colisão da bolinha com a raquete do oponente sem o uso da biblioteca, precisamos criar outra função. Isso se faz necessário por estamos trabalhando no plano cartesiano e os cálculos envolvidos na função tem como retorno valores que significam um lugar específico dentro do canva. Veja esse trecho de código com as duas funções:

function verificaColisaoRaquete() {
    if (xBolinha - raio < xRaquete + raqueteComprimento
        && yBolinha - raio < yRaquete + raqueteAltura
        && yBolinha + raio > yRaquete) {
        velocidadeXBolinha *= -1;
    }
} 

function verificaColisaoOponente(){
    if (xBolinha + raio > xRaqueteOponente - raqueteComprimento
        && yBolinha - raio < yRaquete + raqueteAltura
        && yBolinha + raio > yRaquete) {
        velocidadeXBolinha *= -1;
    }
}

Percebe que a primeira condição, que verifica o valor de x, está com operadores diferentes?

Quando temos xBolinha - raio < xRaquete + raqueteComprimento, como em verificaColisaoRaquete, o retorno será a colisão da parte esquerda da bolinha com a parte direita da raquete. Quando se trata da colisão com o oponente, buscamos o valor que seja o ponto de encontro entre a parte direita da bolinha com a parte esquerda da raquete. Por isso xBolinha + raio > xRaqueteOponente - raqueteComprimento.

Lembre-se de retirar os parâmetros e chamar a nova função no draw()!

Vou deixar aqui um artigo bem legal que fala sobre como funciona o plano cartesiano no P5.JS e que pode ajudar a compreender como funcionam esses cálculos condicionais:

• P5 JS: Plano Cartesiano

Forte abraço!