Oi Adna! Tudo bem por aí?
No P5.JS, e em geral sempre que programamos utilizando um canvas (a tela em que nosso jogo aparece), nós determinamos as posições através de coordenadas em um plano cartesiano.
Observe na imagem como o plano cartesiano do P5.JS funciona:
- As coordenadas
0, 0
estão no canto superior esquerdo; - Quanto maior o valor de
x
, mais à direita; - Quanto maior o valor de
y
, mais abaixo.
Quando desenhamos nossa bolinha, as coordenadas estão exatamente no centro do círculo, e o raio é o valor que vai do centro até alguma extremidade. Ao subtrair o valor do raio de y, teremos as coordenadas exatas da extremidade superior do círculo, e ao subtrair de x, as coordenadas da extremidade esquerda do círculo.
O mesmo acontece com a raquete. Em algum momento do curso, calcularemos yRaquete + raqueteAltura
para podermos chegar na extremidade inferior da raquete, afinal as coordenadas iniciais do retângulo ficam na ponta superior esquerda:
Vou deixar aqui um artigo bem legal que explica melhor sobre o plano cartesiano do P5.JS para que você possa explorar um pouquinho mais:
Adna, espero ter ajudado. Estou à disposição!
Forte abraço.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!