[Dúvida] O alert não aparece

Olá, Rafael!

Parece que você está fazendo um ótimo trabalho com o JavaScript, ta ficando bem legal seu código!

O erro está relacionado com o escopo das variáveis xAleatorio e yAleatorio. Você as declarou dentro da função atualizaTela(), o que significa que elas só existem dentro dessa função. Quando você tenta acessá-las na função dispara(), elas não são reconhecidas, pois estão fora do escopo.

Para resolver isso, você deve declarar as variáveis xAleatorio e yAleatorio fora de qualquer função, tornando-as variáveis globais. Dessa forma, elas poderão ser acessadas por qualquer função no seu script. Veja como ficaria:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;
    var xAleatorio;  // Declaradas aqui
    var yAleatorio;  // Declaradas aqui

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();

   }

    function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);

    }

    function desenhaAlvo(x, y) {

    desenhaCirculo(x, y, raio+20, 'red');
    desenhaCirculo(x, y, raio+10, 'white');
    desenhaCirculo(x, y, raio, 'red');

    }

    function sorteiaPosicao(maximo) {

        return Math.floor(Math.random() * maximo);

    }

    function atualizaTela() {
    limpaTela();
    xAleatorio = sorteiaPosicao(600);  // Atribuídas aqui
    yAleatorio = sorteiaPosicao(400);  // Atribuídas aqui
    desenhaAlvo(xAleatorio, yAleatorio);
    }

    setInterval(atualizaTela, 3000);

function dispara(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > xAleatorio - raio)
    && (x < xAleatorio + raio)
    && (y > yAleatorio - raio)
    && (y < yAleatorio + raio)) {

    alert('acertou');

    }


}

tela.onclick = dispara;
    

</script>

Agora, as variáveis xAleatorio e yAleatorio são acessíveis dentro da função dispara(), e o alerta deve aparecer quando você acertar o alvo.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Obrigado pelo elogio :), são importantes nessa nova caminhada.

Porém eu coloquei o xAleatorio e o yAleatorio fora da função (linha 13 e 14, respectivamente)

Olá Rafael, tudo bem?

Peço desculpas pelo equívoco. Durante os testes, acabei me confundindo e pensei que o problema estivesse na falta de chamada das variáveis. No entanto, percebi que o erro foi corrigido ao remover a segunda declaração da variável. É importante observar que as variáveis são declaradas no início do código e também dentro da função limpaTela.

 var raio = 10;
    var xAleatorio;
    var yAleatorio;

// Continua o código
 function atualizaTela() {
    limpaTela();
    var xAleatorio = sorteiaPosicao(600); // voce usa o var novamente, recriando a váriavel 
    var yAleatorio = sorteiaPosicao(400); // voce usa o var novamente, recriando a váriavel 
    desenhaAlvo(xAleatorio, yAleatorio);
    }

Portanto, o que de fato solucionou foi reescrever o código da função atualizaTela(), ficando assim:

      function atualizaTela() {
    limpaTela();
     xAleatorio = sorteiaPosicao(600);
    yAleatorio = sorteiaPosicao(400);
    desenhaAlvo(xAleatorio, yAleatorio);
    }

Peço desculpas pela confusão causada e espero ter esclarecido tudo. Desejo muito sucesso em sua jornada. Um grande abraço e até logo!

Bons estudos!

Sucesso ✨