Olá Anthony, tudo ok por aí ?
Para lhe explicar essa sua dúvida, eu primeiro vou explicar o que é o parâmetro width
e o que é o height
.
O width
é equivalente a largura total;
O height
é equivalente à altura total;
Dessa forma quando é feita essa verificação aqui:
if (xBolinha + raio > width || xBolinha - raio < 0) {
velocidadeXBolinha *= -1;
}
O que estamos falando aqui é que: SE a posição x da bolinha somada ao raio dela for maior que largura total do canvas criado para programar o jogo, E a posição x da bolinha menos o raio, forem menores que 0 então o deslocamento do eixo x da bolinha será mudado para direção e números inversas à ele;
Basicamente se tocar na borda do lado que for mude de direção.
E o mesmo acontece com o height
, pois se a bolinha tocar no topo ou no fundo do canvas ela deve ter a direção e/ou números mudados para os inversos.
Portanto essa verificação de ser usando sinal de maior ou menor (<>
), para que o JavaScript entenda o seguinte: “CASO O OBJETO ESTIVER EM UMA POSIÇÃO MAIOR OU MENOR DO QUE O LIMITE DO CANVAS ELE DEVE VOLTAR”, e isso faz sentido né, certo.
Agora se você utilizar o sinal de igual para isso(==
) você estará dizendo para o JavaScript o seguinte: “CASO O OBJETO ESTIVER EM UMA POSIÇÃO IGUAL O LIMITE TOTAL DO CANVAS ENTÃO ELE DEVE VOLTAR”
Essa parte em negrito que deve receber atenção, porque caso você use ela à principio você não terá problemas, contudo quando você tiver que adicionar a verificação de pontos, de colisão com a raquete sua e do oponente e mais algumas que aparecem “por baixo dos panos” e que podem FACILMENTE bugar seu projeto, e todas elas necessitam da verificação de sinal de maior e menor(<>
) e caso a verificação tenha sido feita usando o sinal de igual(==
) você terá problemas de sintaxe ou de interpretação, por parte do JavaScript.
É por conta disso que usamos a verificação de maior/menor para programar a colisão das bordas.
Espero ter ajudado um pouco, caso ainda tenha dúvidas fico à disposição.
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.