Como detectar o clique em um gif ou imagem jpg

Front-end JavaScript
#1

Olá pessoal, estou tentando fazer uma desafio de um curso, ele propões em fazer um mini game onde um alvo aparece aleatoriamente na tela e você tem que clicar nele antes que desapareça, a parte de ele aparecer aleatoriamente já consegui fazer, meu problema é em detectar o click em cima dela, tentei fazer com o código a seguir mas acontece que ele dispara o alert no começo da execução dele, sem eu clicar em nada.

<canvas id="tela" width="600" height="400">
<meta charset="UTF-8">

<script>
	var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

	var imagem = new Image();
	imagem.src="alvo.png";
	
    var Imagem = function(x,y) {
		c.drawImage(imagem,x,y)
	}
		
	var limpa = function() {
		c.clearRect(0,0,600,400);
	}
		
	var sorteia = function() {
		var x = Math.round(Math.random()*550);
		var y = Math.round(Math.random()*350);
			
		limpa();
		Imagem(x,y);
	}

        var clicou = function() {
		alert("Você acertou");
	}
		
	setInterval(sorteia, 3000);	
	imagem.onclick = clicou();
</script>
#2

Não sei se entendi exatamente, mas se vc quiser detectar o clique na imagem, da pra usar o onClick event do jquery;

$("#id-da-sua-imagem-na-tela").on('click', function(){
    alert("Você acertou");
});
#3

Olá Luis,

acontece que você está criando uma imagem dentro do contexto de um canvas, então ela não está como um elemento DOM e sim, um elemento dentro do seu canvas. São dois contextos diferentes. Em segundo lugar, a sua função clicou é executada, pois você está passando a execução dela ao evento “onclick de imagem” - que nesse caso não é disparada pois não existe nesse contexto. Tanto que para tal, você utilizaria document.getElementByName('img') ou algo do tipo.

Faça a seguinte modificação:

var clicou = function(evento) {
    console.log(evento)
    alert("Você acertou");
}

tela.onclick = clicou

Abra a console do seu navegador e você vai notar que contém informações do evento MouseEvent ou seja, é possível capturar a posição do mouse, ao clicar no canvas. Bom, como é um desafio, vou deixar você sugerir o que fazer agora que sabe onde o mouse está e as coordenadas X e Y que você usa dentro da função sorteia :wink:

Outra sugestão seria mudar a abordagem. Ao invés de usar canvas, poderia usar o HTML mesmo, criando uma imagem, “appendando” ela ao body e modificando a posição do css, via javascipt, daí você estaria no contexto do DOM, podendo fazer do desse jeito que quer.
:+1: