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

Alert não aparece!!

Alguém pode me ajudar a encontrar o erro?

<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;
    var yAleatorio;

    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 alvo(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);
    yAleatorio = sorteiaPosicao(400);
    alvo(xAleatorio, yAleatorio);
}


setInterval(atualizaTela,1000)

function clicarAlvo(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 = clicarAlvo;
</script>
2 respostas
solução!

Olá Julie, tudo bem com você?

Você cometeu um pequeno erro de digitação que impede de poder calcular a posição correta, veja:

function clicarAlvo(evento){
    var x = evento.pageX - tela.offsetleft;

Na verdade deveria ser tela.offsetLeft, o que estava acontecendo é que o seu valor de X nunca era valido, com esse correção seu programa já deve estar funcionando corretamente :)

Abraços e Bons Estudos!

Muito Obrigada Geovani!!! Era isso mesmo .