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

num grafico
                                                eixo y
                                                     |parte positiva do y
                                                     |  
eixo x_________________________|_______________         parte positiva do x
parte negativa do x                  |
                                                     |
                                                     |
            parte negativa do y (-)  |

porque xRaquete é maior que o xBolinha, sendo que como a raquete fica na parte negativa do x quanto mais proximo menor o valor, e porque no raio eu subtraio e nao somo e outra duvida devemos fazer a raquete + o comprimento ou a raquete + altura da raquete, o ponto princial nao é o centro? nao deveira ser a altura/2 como fazemos com a circunferencia nao colocamos o diametro todo mas apenas o raio, porque no comprimento e na autura colocamos tudo?

Olá, tudo bem?

Vamos por partes! A função que você está em dúvidas é essa né?

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

E as dúvidas são:

O ponto (0,0) não seria o centro da tela?
Por que xRaquete é maior que xBolinha
Por que subtrair ao invés de somar o raio
Seria (xRaquete + raqueteComprimento) ou (xRaquete + raqueteAltura)?

Para ficar mais simples, vou te explicar primeiro o que essa função quer dizer, mas antes preciso te explicar como funcionam as coordenadas do P5js:

Você esta pensando no plano cartesiano onde a origem está no centro da tela, isso?

Mas no P5Js por padrão ele cria o ponto (0,0) no canto superior esquerdo, ou seja:

Se você criou um Canvas de tamanho 500x400, ele vai começar do canto superior esquerdo (0,0) até o canto superior direito (500,0) para o eixo X e do canto superior esquerdo (0,0) até o canto inferior esquerdo (0,400) para o eixo Y, portanto o canto inferior direito seria (500,400)

Concorda comigo que, com isso em mente, se você tiver um círculo no ponto (100,100) e quiser que ele suba 20px, você precisa diminuir o eixo Y dele, já que a numeração aumenta de cima pra baixo? No final, ele subiu e foi para (100,80)!

Agora vamos voltar para a função

Neste caso estou considerando que essa colisão seria entre a bolinha e a raquete que está na esquerda, correto? Então a lógica é:

Se, a posição horizontal da bolinha, for "MENOR"(por que a raquete está ANTES nas coordenadas do P5Js) que a posição horizontal da raquete(ENCOSTARAM) E estiver ENTRE a área vertical que a raquete ocupa: HOUVE COLISÃO, INVERTA O SENTIDO DA BOLINHA

É exatamente isso que esse código está dizendo:

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

Ta, mas por que -raio, +raqueteComprimento, +raqueteAltura?

Da mesma forma com que o P5Js cria o Canvas a partir do canto superior esquerdo, ele também cria os objetos, com exceção do círculo, que cria a partir do centro. Então, se quisermos pegar as bordas de fato do objeto, devemos fazer algumas "relações", conforme as imagens abaixo

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Por isso utilizamos tantos argumentos quando descrevemos o objeto, para pegar as bordas e os limites do mesmo, logo, se eu quiser saber se o lado esquerdo da bola colidiu com o lado direito da raquete, descrevemos da seguinte forma:

If(xBolinha-raio < xRaquete+raqueteComprimento){
    print('Colidiu!');
}

Espero que tenha sanados todas as suas dúvidas, mas caso mesmo assim queira saber algo a mais pode mandar por aqui mesmo

Bons estudos!!!