Olá, não consigo achar o erro que faz o tela.onclick não funcionar:
<!DOCTYPE html>
<html>
<head>
<title>Tiro ao Alvo</title>
<meta charset="UTF-8">
</head>
<body style="margin: 0;">
<canvas id="tiro-ao-alvo" width="1300" height="640"></canvas>
<script>
var tela = document.getElementById("tiro-ao-alvo");
var c = tela.getContext("2d");
var raio = 10;
function limpa() {
c.clearRect(0,0,1300,640);
}
function sorteia(max) {
return Math.floor(Math.random() * max);
}
function cor(tinta) {
c.fillStyle = tinta;
c.fill();
}
var circulo = function(x,y,raio, cor) {
c.fillStyle = cor;
c.beginPath();
c.arc(x,y,raio, 0, 2*Math.PI);
c.fill();
}
var desenhaAlvo = function(x, y) {
circulo(x,y,raio + 30,"white");
circulo(x,y,raio + 20,"red");
circulo(x,y,raio + 10,"white");
circulo(x,y,raio,"red");
};
function desenha() {
limpa();
var alvoX = sorteia(1300);
var alvoY = sorteia(640);
desenhaAlvo(alvoX, alvoY);
};
var alvoX;
var alvoY;
setInterval(desenha,2000);
tela.onclick = function(evento) {
var x = evento.pageX;
var y = evento.pageY;
if( (x > alvoX - raio) && (x < alvoX + raio) && (y > alvoY - raio) && (y < alvoY + raio) ) {
alert("Acertou!");
}
}
</script>
</body>
</html>Preciso de ajuda, por favor.
