Olá pessoal!
Notei que o código escrito abaixo pode não funcionar conforme o esperado em alguns casos:
function marcaPonto(){
if (xBolinha > 590){
meusPontos += 1;
}
if (xBolinha < 10){
pontosOponente += 1;
}
Acontece que xBolinha é o centro da bolinha:
O código desta maneira está condicionado a marcar pontos quando o centro da bolinha passa pelos pontos de X determinados (590 e 10).
Como no exemplo da aula a bolinha tem raio 10, este código funciona, mas se você der um tamanho maior ou menor de raio, a função passa agir de maneira errática. Vamos aos exemplo abaixo:
No caso de uma bolinha menor (com menor tamanho de raio que 10)
- Ao se dirigir à borda direita da tela, se a bolinha tiver raio 5 por exemplo, quando o xBolinha (ou seja, seu centro) passar do ponto X de 590, a bolinha não ainda não irá colidir com a parede, mas à partir daí já marcará pontos.
- A cada nova movimentação do centro da bolinha após o ponto X de 590 (como em 591,592,593...) ela continuará marcando pontos.
- A mesma situação se aplica se a bolinha se dirigir ao ponto esquerdo da tela. Quando a bolinha passar do ponto X de 10, continuará marcando pontos até chegar no ponto X de 5, onde colidirá com a parede e voltará de direção. Enquanto estiver com seu centro à esquerda do ponto X de 10, continuará marcando pontos até sair desta zona.
No caso de uma bolinha maior (com maior tamanho de raio que 10), o centro da bolinha não passará nem do ponto X de 590, nem do ponto X de 10, pois irá colidir com a parede do campo antes e inverterá a direção da bolinha. Como essas coordenadas não serão ultrapassadas pelo centro da bolinha, nenhum ponto será marcado.
Minha sugestão seria a seguinte:
function marcaPonto(){
if (xBolinha + raio > width){
meusPontos += 1;
}
if (xBolinha - raio < 0){
pontosOponente += 1;
}
Desta maneira, a marcação de pontos está atrelada ao ponto de toque da bolinha na borda do campo, e não quando seu centro ultrapassa um ponto pré-determinado.