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

Janela de acerto não aparece

Aonde está o erro que faz com que a janela de "acertou" não apareça?

<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; 
    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 desenhaAlvo(x,y) {

    desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
    desenhaCirculo(x, y, raio + 10, 'white');
    desenhaCirculo(x, y, raio, 'red'); // menor circulo fazer nessa sequência para o círculo maior não ficar por cima de tudo
    }


    function sorteiaPosicao(maximo) {

        return Math.floor(Math.random() * maximo); // Math.floor arredonda pra baixo, diferente do Math.round que arredonda para qualquer lado. Lembrando * maximo é o cálculo no Math.random que calcula um número aleatório entre 0 e o máximo estipulado, que estão no caso nas variáveis xAleatorio e yAleatorio, que são os números do tamanho do canvas.    

    }



    function atualizaTela() {

        limpaTela();

        xAleatorio = sorteiaPosicao(600); // sorteia a posição do eixo x, lembra que a primeira casa é o eixo x, que vai de 0 a 600, 600 é o máximo nesse canvas. Esse 600 é a referência pra (maximo) ali estipulada na função sorteiraPosicao()
        yAleatorio = sorteiaPosicao(400); // mesma explicação pro eixo y

        desenhaAlvo(xAleatorio,yAleatorio); //coordenadas eixo x e y, respectivamente, com essas variáveis´que vêm do sorteiaPosicao()
    }

    setInterval(atualizaTela, 2000);



    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!

Oi Tales tudo bem?

O erro está na última linha o correto é onclick em minúsculo tela.onclick = dispara;

Espero ter ajudado!!!

Agradecido, André!! Quebrei a cabeça um tempo por causa disso.

Disponha! As vezes também fico horas quebrando a cabeça em código, normal. E o ruim é que o erro ficou silencioso nem apareceu no console do F12, mas quando bati o olho no onClick já vi o erro.

Bons estudos!!!