Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alguém pode explicar o erro no meu código?

Alguém pode me ajudar? O xAletatorio e yAleatorio (xAlvo, yAlvo), continuam aparecendo como indefinido, por que?

<canvas width = "600" height = "400"></canvas>

<meta charset = "UTF-8">

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var raio = 10
    var xAlvo;
    var yAlvo;

    function desenhaCirculo(xAlvo, yAlvo, raio, cor){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(xAlvo, yAlvo, raio, 0, 2 * 3.14)
        pincel.fill()

    }

    function limpaTela(){

        pincel.clearRect(0, 0, 600, 400)
    }



    function desenhaAlvo(xAlvo, yAlvo){

        xAlvo = sorteia(600);
        yAlvo = sorteia(400);

        limpaTela()

        desenhaCirculo(xAlvo, yAlvo, raio + 40, "red");
        desenhaCirculo(xAlvo, yAlvo, raio + 30, "white");
        desenhaCirculo(xAlvo, yAlvo, raio + 20, "red");
        desenhaCirculo(xAlvo, yAlvo, raio + 10, "white");
        desenhaCirculo(xAlvo, yAlvo, raio, "red");

        }

    function sorteia(maximo){

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


    function acerto(evento){

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

        alert(xAlvo, yAlvo)

        if((x > xAlvo - raio) 
            && (x < xAlvo + raio) 
            && (y > yAlvo - raio) 
            && (y < yAlvo + raio)){

            alert("VOCÊ ACERTOU, PARABÉNS!!");

        }

        console.log(x, y, xAlvo, yAlvo)

    }


    setInterval(desenhaAlvo, 3000)

    tela.onclick = acerto;
2 respostas
solução!

Alterei algumas coisas no seu código e funcionou.

Inclui um comentário na linha com alert para o jogo não ser interrompido e reduzi o intervalo de 3 para 1,5 segundos pra tornar o jogo mais desafiador, mas esses códigos não estavam influenciando no erro. E também inclui pra funcionar, mas acredito que no seu código ele já estava presente.

As alteração que fiz que corrigiram o erro foi trocar os nomes dos parâmetros na função desenhaCirculo de xAlvo e yAlvo para x e y, retirar os parâmetros xAlvo e yAlvo da função desenhaAlvo, onde não eram necessários, pois provavelmente estava havendo um conflito com desses parâmetros com as variáveis globais de mesmos nomes.


<canvas width = "600" height = "400"></canvas>

<meta charset = "UTF-8">

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var raio = 10
    var xAlvo;
    var yAlvo;

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

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

    }

    function limpaTela(){

        pincel.clearRect(0, 0, 600, 400)
    }



    function desenhaAlvo(){

        xAlvo = sorteia(600);
        yAlvo = sorteia(400);

        limpaTela()

        desenhaCirculo(xAlvo, yAlvo, raio + 40, "red");
        desenhaCirculo(xAlvo, yAlvo, raio + 30, "white");
        desenhaCirculo(xAlvo, yAlvo, raio + 20, "red");
        desenhaCirculo(xAlvo, yAlvo, raio + 10, "white");
        desenhaCirculo(xAlvo, yAlvo, raio, "red");

        }

    function sorteia(maximo){

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


    function acerto(evento){

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

        //alert(xAlvo, yAlvo)

        if((x > xAlvo - raio) 
            && (x < xAlvo + raio) 
            && (y > yAlvo - raio) 
            && (y < yAlvo + raio)){

            alert("VOCÊ ACERTOU, PARABÉNS!!");

        }

        console.log(x, y, xAlvo, yAlvo)

    }


    setInterval(desenhaAlvo, 1500)

    tela.onclick = acerto;

    </script>

Obrigado Francisco, consegui entender. Como a função desenhaAlvo não precisava receber parâmetros, pois seriam definidos dentro da função, estava acontecendo o conflito.