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

Não aparece a mensagem de acerto.

Boa tarde...

Quando clico no alvo, a mensagem de acerto não aparece, o que está errado no código?

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

<script>

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

    function circulo(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);
    }


    var raio = 10

    var xAleatorio = sorteiaPosicao
    var yAleatorio = sorteiaPosicao


    function alvo(x, y){

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

    function sorteiaPosicao(maximo){

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


    function alternaAlvo(){        

        limpaTela();

        var xAleatorio = sorteiaPosicao(600);
        var yAleatorio = sorteiaPosicao(400);

        alvo(xAleatorio, yAleatorio);
    }

    setInterval(alternaAlvo, 5000);

    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>
3 respostas
solução!

Boa noite, Jocimar! Como vai?

O seu código possui alguns erros! O primeiro deles é no trecho a seguir:

var raio = 10

var xAleatorio = sorteiaPosicao
var yAleatorio = sorteiaPosicao

As variáveis xAleatorio e yAleatorio na realidade não recebem valor nenhum inicialmente como pode ser visto durante o vídeo da aula! Então o correto seria fazer:

var raio = 10;

var xAleatorio;
var yAleatorio;

Já o segundo problema é no trecho abaixo:

function alternaAlvo(){        

     limpaTela();

     var xAleatorio = sorteiaPosicao(600);
     var yAleatorio = sorteiaPosicao(400);

     alvo(xAleatorio, yAleatorio);
}

As variáveis xAleatorio e yAleatorio dentro dessa função deveriam fazer referência às variáveis que já foram criadas anteriormente! Portanto, dentro da função alternaAlvo() a palavra reservada var não deveria ser usada. Sendo assim, o correto seria:

function alternaAlvo(){        

     limpaTela();

     xAleatorio = sorteiaPosicao(600);
     yAleatorio = sorteiaPosicao(400);

     alvo(xAleatorio, yAleatorio);
}

Fazendo esses ajustes o seu código irá funcionar como esperado!

P.S.: Um outro detalhe é que vc esqueceu em algumas linhas do seu código de seguir a boa prática de sempre terminá-las com um ponto e vírgula! Isso não tem impacto nenhum sobre o problema que ocorreu! No entanto, como é uma boa prática, então o ideal é seguir o que ela diz!

Grande abraço e bons estudos!

Bom dia Gabriel,

Agradeço pela ajuda, funcionou depois das modificações.

Att.

Por nada, Jocimar! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!