Oi Luiz, tudo beleza?
Isso acontece pois na função rect as coordenadas do retângulo não estão no meio dele, e sim no vértice superior esquerdo, onde ele se inicia.
Vamos revisar rapidamente como se comporta o plano cartesiano no P5.JS:
As coordenadas 0,0 estão na parte superior esquerda, e quanto mais para baixo, maior o y. Quanto mais à direita, maior o x.
Veja, se eu crio um retângulo nas coordenadas 10, 10, com altura e largura 100:
function draw() {
background(0);
rect(10, 10, 100, 100);
}
Esse vai ser o resultado:
E, se eu fizer um retângulo com outras dimensões mas nas mesmas coordenadas?
function draw() {
background(0);
rect(10, 10, 150, 75);
}
O resultado é esse. Perceba que o retângulo se altera para os lados, mas suas coordenadas 10, 10 continuam no vértice superior esquerdo:
Sendo assim, conseguimos descobrir onde está yRaquete no nosso jogo: na ponta superior da raquete. Quando consideramos yRaquete + raqueteAltura o resultado será a ponta inferior da raquete, afinal no plano cartesiano do P5 o eixo y começa na parte de cima da tela, e quanto maior, mais para baixo. Já a função circle cria as coordenadas da bolinha a partir do seu centro, e utilizamos o raio para chegar a algum ponto externo da bolinha.
O que estamos comparando nessa linha de código específica são as coordenadas da parte superior da bolinha e da parte inferior da raquete.
Então, quando a condição yBolinha - raio < yRaquete + raqueteAltura for verdadeira a bolinha estará acima da raquete ou em contato com ela, que é o que buscamos na função de colisão com a raquete em que essa condição é analisada, confirmando sua linha de raciocínio.
Porém, como essa linha de código é uma condição, não é ela que determina a ação que será executada. Essa condição terá um retorno booleano, que será verdadeiro ou falso, e a partir desse retorno o movimento da bolinha será alterado conforme o escopo da condição (nesse caso, velocidadeXBolinha *= -1), em dinamismo com as outras funções que já foram estabelecidas ao longo do código.
Espero ter te ajudado a esclarecer essa dúvida, Luiz. Fico à disposição!
Forte abraço.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
