Não entendi como funciona esse cálculo; (function verificaColisaoRaquete() {
if (xBolinha - raio < xRaquete + raqueteComprimento
&& yBolinha - raio < yRaquete + raqueteAltura
&& yBolinha + raio > yRaquete) {
velocidadeXBolinha *= -1;
}
}
Olá, Mateus! Tudo bom contigo?
Desde já, peço desculpas pela demora em retornar!
Vamos analisar com carinho cada condição da estrutura if?
xBolinha - raio < xRaquete + raqueteComprimentoDe maneira geral, o trecho de código acima tem como objetivo verificar a colisão horizontal da raquete com a bolinha. Vejamos a lógica por trás disso:
xBolinha faz referência ao centro da bolinha;raio, chegamos na borda esquerda da bolinha (coordenada que servirá de base para verificação da colisão);xRaquete é a variável cujo valor armazenado representa o início do desenho da raquete (horizontalmente). Quando somado à raqueteComprimento, temos como valor a localização da borda direita da raquete;xBolinha - raio for inferior a xRaquete + raqueteComprimento, então significa dizer que a posição horizontal da borda da bolinha ultrapassou a coordenada x da borda da raquete, ou seja, houve colisão.yBolinha - raio < yRaquete + raqueteAlturaPor intermédio dessa condição, será analisado se a bolinha encontra-se de fato no espaço vertical ocupado pela raquete. Vejamos como isso ocorre:
yBolinha faz referência ao centro da bolinha (coordenada y);yBolinha e raio resulta na borda superior da bolinha;yRaquete é a posição vertical onde o desenho da raquete é iniciado. Quando essa variável é somada à raqueteAltura, temos como valor a localização da borda inferior da raquete.yBolinha - raio for inferior a yRaquete + raqueteAltura, então a bolinha colidiu com o espaço ocupado pela raquete. Se não tivéssemos isso, qualquer ponto vertical abaixo da raquete, quando tocado pela bola, geraria a ação da colisão, e não é isso que desejamos!yBolinha + raio > yRaquetePor fim, temos a última condição, a qual também serve para verificar a colisão vertical da bolinha com a raquete. Vamos entendê-la?
yBolinha e o raio resulta na borda inferior da bolinha;yRaquete), significa que a bolinha não está acima da raquete. Se não tivéssemos tal verificação, teríamos um problema semelhante ao discutido na outra condição!Com a união de todas essas condições, construímos um código que não só verifica a colisão horizontal, mas também a vertical, da bolinha com a raquete!
Espero que tenha compreendido minha explicação. Caso surja alguma dúvida, sinta-se confortável para enviá-la no fórum! Ficarei contente em te ajudar.
Grande abraço, Mateus!