Marco, não entendi muito bem a sua dúvida então vou explicar tudo e ver se consigo te ajudar.
Essa questão do eixo Y da bolinha fica um pouco confusa pelo P5.JS, pois o canvas é um eixo cartesiano ao contrário, quanto maior o y mais para baixo se move.
Então o que temos que fazer é o seguinte, definir que a bola deve estar dentro de uma certa extensão do eixo y.
Na raquete temos duas variaveis, a parte de cima e a parte de baixo, que devemos colocar como o limite do espaço possível de colisão.
Na documentação do P5.JS podemos ver que o eixo Y e X tem o ponto 0 na ponta superior esquerda da raquete. Essa informação já nos dá o limite superior da raquete, que no seu caso seria o yRaquete. O limite inferior seria o yRaquete + AlturaRaquete (Essa é a parte que entra o plano cartesiano ao contrário que citei no início), pois é a ponta superior mais o tamanho em pixels da raquete.
No exercício é usado o yBolinha - raio e yBolinha + raio pois o y da bolinha é no centro dela, então para sabermos que o limite inferior dela está dentro do limite superior da raquete temos que fazer este cálculo.
Então no código juntamos todos os limites da raquete na mesma função para poder definir onde a bolinha irá "colidir" com a raquete.
xBolinha - raio < xRaquete + widthRaquete (Ponta horizontal onde a bola irá tocar a raquete em qualquer plano na altura)
yBolinha + raio > yRaquete (Ponta inferior da bolinha e limite superior da raquete)
yBolinha - raio < yRaquete + heightRaquete (Ponta superior da bolinha e limite inferior da raquete)
Essas três condições definem que a bola está dentro dos limites da raquete, isso aciona a continuidade da função que irá mudar a direção horizontal da bola.
Se uma das 3 condições não forem satisfeita(as) não será acionado a continuidade da função, o que não irá ocasionar a mudança da direção da bola.
Espero que possa ter explicado, qualquer dúvida me avise!
