Pessoal, consegui fazer com que o alvo apareça em lugares aleatórios no canvas, mas não consegui fazer com que o clique identifique a área total do meu alvo, somente o ponto central.
Outra dúvida, tenho como jogar um canvas dentro do outro? Assim eu usaria DOM para pegar os parâmetros desse novo canvas, uma vez que eu iria desenhá-lo dentro desse canvas, ficando assim:
canvasDentroDoCanvasComDesenhodoAlvo.onclick = atira;
Minha meta é transformar num pequeno jogo de 10 fases, onde cada acerto, vai diminuindo em 1 segundo o tempo de aparição do alvo na tela; clicou, acertou e vai pra próxima fase; errou, acaba o jogo.
Meu código atual segue abaixo:
<meta charset="UTF-8">
<style>
body {background: #f1f1f1; margin: 0;}
canvas {background: #fff;}
</style>
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var corBranca = "white";
var corVermelha = "red";
var raio = 50;
var eixoX;
var eixoY;
function circulo(eixoX,eixoY,raio,cor) {
c.fillStyle = cor;
c.beginPath();
c.arc(eixoX, eixoY, raio, 0, 2*Math.PI);
c.fill();
};
function limpaTela() {
c.clearRect(0, 0, 600, 400);
};
function alvo() {
limpaTela();
eixoX = Math.round(Math.random()*599) + 1;
eixoY = Math.round(Math.random()*399) + 1;
circulo(eixoX,eixoY,raio,corVermelha);
circulo(eixoX,eixoY,raio-10,corBranca);
circulo(eixoX,eixoY,raio-20,corVermelha);
circulo(eixoX,eixoY,raio-30,corBranca);
circulo(eixoX,eixoY,raio-40,corVermelha);
};
function atira(evento) {
var posicaoX = evento.pageX;
var posicaoY = evento.pageY;
c.fillStyle = "blue";
c.beginPath();
c.arc(posicaoX, posicaoY, 4, 0, 2 * Math.PI);
c.fill();
if(posicaoX == eixoX && posicaoY == eixoY){
alert("Você acertou o alvo.");
} else {
alert("Você errou o alvo.");
}
};
setInterval(alvo, 2000);
tela.onclick = atira;
</script>