[dúvida] lógica de acerto

Oi, Fernando! Tudo certo por aí?

Desde já, peço desculpas pela demora em retornar.

Para compreender a lógica da função dispara, a separei em alguns trechos, vamos analisá-los?

Inicialmente, a função dispara é chamada quando clicamos com o botão do mouse sobre a tela. Quando isso acontece, é armazenado dentro do parâmetro evento todas as informações acerca da ação feita (como houve apenas um click, as informações, mais conhecidas como propriedades, estarão associadas a ele).

Nas duas primeiras linhas da função dispara, temos o seguinte trecho de código:

var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;

Nele, estamos armazenando dentro das variáveis x e y, respectivamente, as posições horizontal e vertical do nosso click. Para que fosse possível, foi necessário utilizar algumas propriedades do evento que ocorreu:

• .pageX : verifica a posição horizontal do evento do mouse;
• .pageY : verifica a posição vertical do evento do mouse.

Além disso, para evitar uma diferença de valores e apenas contabilizar o espaço da tela, removemos as distâncias do topo (com a propriedade offsetTop) e da esquerda (com a propriedade offsetLeft) da variável tela, que representa o espaço que estamos trabalhando da tag <canvas>.

Com o valor correto da posição em que houve o click do mouse, podemos partir para a condição que verifica se conseguimos acertar o alvo:

if((x > xAleatorio - raio)
  && (x < xAleatorio + raio)
  && (y > yAleatorio - raio)
  && (y < yAleatorio + raio)) {
      alert('Acertou!');
  }

Para acertarmos o alvo, precisamos clicar na área em que ele se encontra. Cada conjunto de verificações do if acima fica responsável por um espaço específico. Antes de observar cada um deles, vamos relembrar que:

• x corresponde à posição horizontal do click do mouse;
• y corresponde à posição vertical do click do mouse;
• xAleatorio é a posição horizontal do centro do alvo;
• yAleatorio é a posição vertical do centro do alvo;
• raio é a distância do centro do alvo até a sua borda.

Além disso, um ponto-chave para entender o que virá a seguir é saber que como são dispostas as coordenadas da nossa tela. Horizontalmente, os valores crescem da esquerda para a direita. Verticalmente, eles crescem de cima para baixo, como mostra a imagem:

Com isso, já podemos analisar cada trecho:

• x > xAleatorio - raio: verifica se a posição horizontal do click do mouse é maior que a posição da borda esquerda do alvo. Esta borda é calculada diminuindo xAleatorio pelo raio;
• x < xAleatorio + raio: verifica se a posição horizontal do click do mouse é menor que a posição da borda direita do alvo. Esta borda é calculada somando xAleatorio pelo raio;
• y > yAleatorio - raio: verifica se a posição vertical do click do mouse é maior que a posição da borda superior do alvo. Esta borda é calculada diminuindo yAleatorio pelo raio;
• y < yAleatorio + raio: verifica se a posição vertical do click do mouse é maior que a posição da borda inferior do alvo. Esta borda é calculada somando yAleatorio pelo raio;

Caso todas as condições sejam verdadeiras, significa dizer que o click do mouse aconteceu somente nos limites do alvo, não os ultrapassando. Logo, a mensagem “Acertou!” aparece, avisando que conseguimos acertar o alvo.

Espero ter ajudado, Fernando! Caso surjam dúvidas após minha explicação ou ao longo dos seus estudos, fico à disposição!

Forte abraço!

Olá, Andrieli.

Obrigado por essa super explicação!