Semelhantemente ao que comentei na atividade "Acertando o alvo", novamente a proposta do instrutor foi um teste IF que testa se a posição do mouse no momento do clique estava ou não dentro de uma área retangular.
Insisto que, uma vez que podemos ser mais exatos, utilizando apenas operações matemáticas de que já conhecemos, devemos fazê-lo.
Ora, diante de um cenário no qual você possui as corrdenadas de um ponto central tido por alvo, mas que admite acerto em qualquer dos pontos em uma área circunferencial com raio predefinido, e as coordenadas do clique efetuado pelo usuário, para testar se este acertou ou não, basta verificar se a distância entre o ponto central e a posição do clieque é igual ou inferior ao raio da área do alvo.
Segue todo o código, com a mudança proposta:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
var xAleatorio;
var yAleatorio;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function desenhaAlvo(x,y) {
desenhaCirculo(x, y, raio+20, 'red');
desenhaCirculo(x, y, raio+10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
function atualizaTela() {
limpaTela();
xAleatorio = sorteiaPosicao(600);
yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
setInterval(atualizaTela, 1000);
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
// Declarei a distanciaCliqueCentroAlvo (teorema de Pitágoras)
var distanciaCliqueCentroAlvo = Math.pow(Math.pow(xAleatorio-x,2)+Math.pow(yAleatorio-y,2),0.5);
// Teste se a distância é menor ou igual que o raio do alvo
if (distanciaCliqueCentroAlvo<=raio) {
alert("Você acertou!!");
}
}
tela.onclick = dispara;
</script>