Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Sugestão de código para marcar pontos (e solucionar problemas de marcação errática de placar)

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:

  1. 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.
  2. 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.

1 resposta
solução!

Olá, Matheus! Tudo certo por aí?

Antes de tudo, agradeço a paciência em aguardar uma resposta.

Ótima solução e organização de ideias! Além dos pontos que você salientou, cabe dizer que, por meio do seu código, evitamos possíveis problemas relacionados à alteração do tamanho da tela. Agora, independente do tamanho, a verificação da colisão sempre acontecerá.

Com certeza a sua sugestão de código irá auxiliar várias pessoas que estão realizando este curso!

Aliás, caso tenha gostado de estudar Javascript, deixo algumas indicações de curso para você continuar se aprofundando:

Caso surjam dúvidas ao decorrer dos seus estudos, sinta-se confortável para enviá-las no fórum. Fico à disposição para te auxiliar no que for preciso!

Grande abraço e ótimos estudos, Matheus!