Olá galera, em vez de criar o alvo como orienta o exercício eu optei por usar a imagem do alvo. Consegui colocar a imagem para ficar aparecendo em locais aleatórios do espaço do canvas e no console do navegador imprime a posição de cada imagem random. Também consegui capturar o click do mouse e imprimir no console do navegador a posição do click do mouse, creio eu que agora só falta comparar as duas posições e quando forem igual apresentar a mensagem ao usuário que ele acertou, mas não estou conseguindo realizar essa comparação. Alguém poderia me dar uma dica de como fazer isso? Segue o código atual:
<meta charset="UTF-8">
<h1><i>Acerte o Alvo</i></h1>
<canvas id="tela" width="500" height="400"></canvas>
<h4><i>By Tharles Amaro</i></h4>
<script>
var tela = document.getElementById("tela");
var pincel = tela.getContext("2d");
//Pintando a tela de fundo
pincel.fillStyle = "black";
pincel.fillRect(0,0,500,400);
//imagem do alvo
var imagem = new Image();
imagem.src = "http://i63.tinypic.com/2u60nxy.png";
//função para limpar a tela
var limpaTela = function() {
pincel.clearRect(0,0,500,400);
};
//função para desenhar imagem do alvo na tela
var desenhaAlvo = function(x,y) {
pincel.drawImage(imagem,x,y);
};
//função para desenhar em locais aleatórios
var pontoX;
var pontoY;
var desenha = function(pontoX,pontoY) {
limpaTela();
pontoX = Math.round(Math.random() * 500);
pontoY = Math.round(Math.random() * 400);
desenhaAlvo(pontoX,pontoY);
console.log("Posição do Alvo: " + pontoX + ", " + pontoY); //posição onde a imagem do alvo está
};
setInterval(desenha, 900);
//função para clique com botão esquerdo
var x;
var y;
var clickEsquerdo = function(evento) {
x = evento.pageX - tela.offsetLeft;
y = evento.pageY - tela.offsetTop;
console.log("Posição do clique: " + x + ", " + y); //mostra a posição do click no console do navegador
};
//Capturando os eventos do click do mouse (esquerdo)
tela.onclick = clickEsquerdo;
//comparar valores da localização da imagem e do click
//fail!!!!!!!!!!!!!!!!!!! :(
</script>