Solucionado
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if ((x > xAleatorio - raio) &&
(x < xAleatorio + raio) &&
(y > yAleatorio - raio) &&
(y < yAleatorio + raio)) Olá,
Não ficou claro a lógica aplicada nesse trecho de código.
Opa Gleidson, tudo bem com você?
Vou tentar te explicar parte por parte do código, ok?
A parte inicial das variáveis:
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;Estamos pegando a coordenada xe ydo click do mouse e subtraindo a parte superior e inferior da tela para termos apenas a posição do nosso canvas, falamos sobre isso nessa aula aqui
Após isso temos as nossa verificações:
if ( x > xAleatorio - raio)Essa primeira verificação é para checar se o X está realmente na bolinha menor branca, então pegamos a posição do nosso alvo e subtraímos o raio para ficar só a parte que interessa
Combinamos isso com uma outra verificação que é para saber se o mouse está realmente na região correta
if( x < xAleatorio + raio)
Com essa verificação garantimos que o click está no alvo e não em qualquer canto do canvas, evitando um falso verdadeiro
A mesma coisa vale para a posição y a única coisa que agora estamos falando do eixo vertical, dessa maneira evitamos que caso o usuário clique no canto ele "acerte"
Combinando essas 4 condições podemos ter certeza de que o click está entre o alvo e a bolinha branca e se acertou ou não :)
Compreendeu? Qualquer coisa estou a disposição :)
Abraços e Bons Estudos!
nessa parte ele verifica se o jogador acertou dentro do alvo, por meio da posição do elemento e da posição dele no tela