O colega Lucas me atentou para o cálculo preciso para a definição do alvo. Basicamente o instrutor apresentou uma solução aproximada para o problema (quadrado). O erro da pseudo-solução apresentada, vai ficando crítico, à medida em que o raio aumenta. Mais informações, podem ser encontradas no post original.
Fiz alguns melhoramentos no código original, colocando variáveis para tornar o código mais "automático" e aumentando os "anéis". Compartilho os trechos principais com vocês.
var raio = 40;
var Cx = 300;
var Cy = 200;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
//desenhando o alvo com círculos concentricos
desenhaCirculo(Cx,Cy, 5*raio, 'red');
desenhaCirculo(Cx,Cy, 4*raio, 'white');
desenhaCirculo(Cx,Cy, 3*raio, 'red');
desenhaCirculo(Cx,Cy, 2*raio, 'white');
desenhaCirculo(Cx,Cy, raio, 'red');
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
console.log(x + ',' + y);
/* esta pseudo solução é só uma aproximação, que fica pior à medida que o raio aumenta. vide prefácio ao fim do código
if ((x >= Cx - raio) && (x <= Cx + raio) && (y >= Cy - raio) && (y <= Cy + raio)){
alert("Parabéns, acertou o alvo!'");
}
exemplos de cliques aceitos indevidamente no alvo central de raio 40: alvo.html:33 331,166; 267,165; 260,223; 334,226
*/
//solução precisa
if (Math.sqrt((Cx - x)*(Cx - x) + (Cy - y)*(Cy - y)) <= raio) {
alert('Acertou o alvo!');
}
}
Seria mais honesto ter apresentado a pseudo-solução como uma aproximação e comentar brevemente que existe um cálculo preciso, não precisaria nem implementá-la. Ainda bem que temos colegas atentos.
