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

function dispara com problemas

tenho o código e possuo o problema que penso ser: as variáveis xAleatorio e yAleatorio estão fora do escopo da function dispara, gostaria de saber como trazê-la para dentro e fazer este código funcionar.

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



    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);
    }

        let xAleatorio;
        let yAleatorio;


    function desenhaAlvo(xAleatorio, yAleatorio) {
        desenhaCirculo(xAleatorio, yAleatorio, raio+20, 'red');
        desenhaCirculo(xAleatorio, yAleatorio, raio+10, 'white');
        desenhaCirculo(xAleatorio, yAleatorio, raio, 'red');
    }

    function atualizaTela (){
        limpaTela()
        desenhaAlvo(xAleatorio, yAleatorio)
        xAleatorio = Math.floor(Math.random() * 600)
        yAleatorio = Math.floor(Math.random() * 400)
    }
    setInterval(atualizaTela, 2000)

    function dispara(evento){
        let x = evento.pageX - tela.offsetLeft;
        let y = evento.pageY - tela.offsetTop;
        if ((x > xAleatorio - raio) 
        && (x < xAleatorio + raio)
        && (y > yAleatorio - raio)
        && (y < yAleatorio + raio))
        {
            alert ("acertou")
        }
    }



    tela.onclick = dispara
</script>
5 respostas

Olá Leonardo, tudo bem?

O problema é que essas duas variáveis estão dentro da função atualizaTela(). Então, elas só tem efeito dentro dessa função. Se quiser utilizá-las em outras funções torne as variáveis globais, ou seja, fora de qualquer função.

Testa aí e nos diga o resultado.

Olá, André. O problema é que se eu tirá-la e colocala como uma variável global, quando dou setInterval, a bolinha não move, fica estática, porém funcional. segue o código modificado:

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



    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);
    }

        let xAleatorio = Math.floor(Math.random() * 600)
        let yAleatorio = Math.floor(Math.random() * 400)


    function desenhaAlvo(xAleatorio, yAleatorio) {
        desenhaCirculo(xAleatorio, yAleatorio, raio+20, 'red');
        desenhaCirculo(xAleatorio, yAleatorio, raio+10, 'white');
        desenhaCirculo(xAleatorio, yAleatorio, raio, 'red');
    }

    function atualizaTela (){
        limpaTela()
        desenhaAlvo(xAleatorio, yAleatorio)


    }
    setInterval(atualizaTela, 2000)

    function dispara(evento){
        let x = evento.pageX - tela.offsetLeft;
        let y = evento.pageY - tela.offsetTop;
        if ((x > xAleatorio - raio) 
        && (x < xAleatorio + raio)
        && (y > yAleatorio - raio)
        && (y < yAleatorio + raio))
        {
            alert ("acertou")
        }
    }



    tela.onclick = dispara
</script>
solução!

Verdade Leonardo. O problema na verdade estava na ordem das variáveis dentro da função atualizaTela(). Altera conforme abaixo e veja o resultado:

    function atualizaTela (){
        limpaTela()        
        xAleatorio = Math.floor(Math.random() * 600)
        yAleatorio = Math.floor(Math.random() * 400)
        desenhaAlvo(xAleatorio, yAleatorio)
    }

ae, funcionou. Obrigado!

Show! Qualquer dúvida estamos por aqui!

Abraços e bons estudos!