Boa tarde, tudo bem?
Fiquei um bom tempo tentando entender como que as condições abaixo dentro dos parênteses do if funcionavam e resolvi tentar desenhar no paint mesmo. Por favor me corrijam se estou errado/equivocado.
function verificaColisaoRaquete(){
if (xBolinha -raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete {
velocidadeXBolinha *= -1;
}Então... temos três condições dentro do IF e todos eles tem que dar condição verdadeira para que o programa ative o velocidadeXBolinha:
Desenhei cada condição dentro do plano cartesiano e os seus resultados cada um -Estou evitando ensinar muito com os números para não ter confusão grande, a ideia é ver o posicionamento dos elementos e como que se relaciona com os sinais > e <:
A 1ª condição xBolinha -raio < xRaquete + raqueteComprimento:
A divisão que faço com a linha vermelha é assim "... < ..." e também 5<10 está sendo verdade, né? Mas o xBolinha no desenho acima tá me falando que é 50<10 e isso tá sendo falso. Então se está sendo falso, não vou aplicar o código que faz a bolinha voltar... só apenas quando o eixo da bolinha passar da linha vermelha para esquerda (como a seta aponta <).
A 2ª condição yBolinha - raio < yRaquete + raqueteAltura:
Agora estamos trabalhando o eixo y, por isso que a linha está "deitada". E aqui é mesma coisa, "... < ...". A dica é girar o gráfico em 90° sentido horário quando estamos falando de eixo Y, então o lado verdadeiro é parte de cima e falsa na parte de baixo. Podemos ver que o yBolinha - raio está fora do verdadeiro, pois está me dizendo que é 50<40 e sabemos que é falso isso e não vai ser ativo o códigovelocidadeXBolinha *= -1;... Quando passar a ser verdadeira (quando a bolinha subir para cima chegando no y=39 passando da linha) o meu código vai fazer a direção da bola mudar.
3ª terceira e última condição yBolinha + raio > yRaquete:
Como temos o sinal "invertido" agora estamos com a "...>...", as condições verdadeira e falsa mudam de lado e é mesma ideia que a 2ª condição só mudando que a parte de cima é falsa e de baixo verdadeira... como a bolinha está passando da linha, o código velocidadeXBolinha *= -1; vai ativar e mudar a direção do eixo X da bolinha.
Essas são as condições que funcionariam de forma isolada
Agora botando as duas condições na seguinte forma:
function verificaColisaoRaquete(){
if (xBolinha -raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura){
velocidadeXBolinha *= -1;
}Antes, precisamos entender um pouco de lógica booleana, porque o código acima está tendo essa lógica, no resumão:
Se V ou(||) F , então verdadeiro e vou fazer o que foi mandado aqui {...} Se F ou(||) F, então falso e NÃO vou fazer o que foi mandado aqui {...}
No caso acima:
Se V e(&&) F, então falso e não vou fazer isso{...} Se F e(&&) F, então falso e não vou fazer isso{...} Se V e(&&) V, então verdadeiro e vou fazer isso{...}
Com isso em mente.
O plano cartesiano fica assim:
Juntando as letrinhas da primeira e segunda imagem, já conseguimos enxergar onde que a bolinha não vai ter a direção mudada, tanto que na aula do professor mostra que a parte de cima da raquete não passa a bolinha com essa duas condições e coloca a terceira como vou deixar a imagem abaixo.
desculpem-me pela zona que o desenho ficou... mas com 3 condições, vamos ter três letrinhas nas áreas divididas por linhas e se uma área tiver condição falsa, toda ela vai ser falsa. E onde estão as três letras V... exatamente a área da raquete! Que vai fazer a direção da bolinha ser mudada.
Tentei ser o mais prático, resumo possível... Mas consegui entender dessa forma, separando parte por parte as condições e fui juntando elas. Espero que aqueles com dificuldades consigam entender também.
E o bug da raquete acontece por conta da fresta entre a raquete e a borda:
Entendo que preciso zerar o xRaquete e criar um quadro um pouco maior para respiro melhor. Alguém sabe como fazer esse quadro dentro do javascript?
