Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre uma Function no JS.

Estou desenvolvendo o jogo Pong pelo JS com o auxilio do curso" Jogos clássicos parte 1: Iniciando no Javascript com Pong"

Tem uma function para determinar se a bolinha atinge a raquete, seria essa function:

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

Minha dúvida é sobre essa última condição para reverter a velocidade da bolinha. Por quê consideramos "raqueteAltura" na segunda condição, mas na terceira utilizamos apenas o yRaquete?

Fico muitissímo grato se alguém puder me ajudar.

2 respostas
solução!

Olá, Kelwin! Tudo certo?

Antes de tudo, peço desculpas pela demora em retornar!

As duas condições em pauta são muito semelhantes, ambas possuem o objetivo de verificar a colisão vertical da bolinha com a raquete. Em contrapartida, algo as difere, vamos ver isso com mais detalhes?

Primeira Condição

yBolinha - raio < yRaquete + raqueteAltura

A essência dessa condição é verificar se a colisão da bolinha ocorreu em uma área diferente da parte inferior da raquete. Vejamos a lógica disso:

  • yBolinha faz referência ao centro da bolinha (coordenada y);
  • A subtração entre 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.
  • Se a 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!

Segunda Condição

yBolinha + raio > yRaquete

Essa condição faz a análise contrária da outra. Aqui, verificamos se a bolinha encontra-se em um espaço diferente da parte acima da raquete.

  • A soma entre yBolinha e o raio resulta na borda inferior da bolinha;
  • Se a borda inferior da bolinha for superior à localização da parte superior da raquete (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 essas duas condições, restringimos o espaço necessário para uma colisão efetiva. Uma vez que temos a verificação horizontal, é necessário analisar se a bolinha tocou de fato a raquete. Caso contrário, qualquer ponto vertical, cuja coordenada x fosse adequada, provocaria a colisão.

Espero que tenha compreendido a diferença entre esses dois itens que compõem a estrutura if. Em caso de dúvidas, sinta-se confortável para enviá-las ao fórum. Fico à disposição para te auxiliar na melhor maneira possível

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.

Oi Andrieli, tudo bem comigo, e contigo?

Então, sua explicação foi ótima e no dia de hoje entendo isso perfeitamente. Inclusive, sou imensamente grato a Alura como um todo, depois de muito estudar na plataforma consegui meu primeiro trampo como dev fullstack com javascript, recentemente completei um mês de trabalho <3

Um abraço pra todos vocês!