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

Meu jogo do arco não funciona, alguém sabe me dizer por quê?

Oi, Meu jogo do arco não funciona, alguém sabe me dizer por quê? Segue o código

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

<script>
        var Yrandom;
    var Xrandom;
    var canvas = document.querySelector('canvas');
    var pincel = canvas.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 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

    }

     function limpaTela() {

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

    }

    function sorteia (maximo) {

       return Math.round (Math.random () * maximo);

    }

     function newInterval () {

     limpaTela();
    var Yrandom = sorteia(400);
    var Xrandom = sorteia(600);
     desenhaAlvo(Xrandom, Yrandom);

     }

     setInterval(newInterval, 2500)



    function dispara(evento) {

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

         if ((x > Xrandom - raio)
          && (x < Xrandom + raio)
          && (y > Yrandom - raio)
          && (y < Yrandom + raio)) {

            alert('Acertou');
        }
    }

    canvas.onclick = dispara;


</script>
4 respostas

Olá Cauê, tudo bem?

O erro está na declaração da variável xRandom e yRandom dentro da função, pois você já havia iniciado a variável no inicio do código e dentro da função você inicia uma nova variável, que existe apenas na função, e seta o valor nela. Segue o código com a correção

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

<script>
        var Yrandom;
    var Xrandom;
    var canvas = document.querySelector('canvas');
    var pincel = canvas.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 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

    }

     function limpaTela() {

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

    }

    function sorteia (maximo) {

       return Math.round (Math.random () * maximo);

    }

     function newInterval () {

     limpaTela();
      Yrandom = sorteia(400);
      Xrandom = sorteia(600);
     desenhaAlvo(Xrandom, Yrandom);

     }

     setInterval(newInterval, 2500)



    function dispara(evento) {

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

         if ((x > Xrandom - raio)
          && (x < Xrandom + raio)
          && (y > Yrandom - raio)
          && (y < Yrandom + raio)) {

            alert('Acertou');
        }
    }

    canvas.onclick = dispara;


</script>

Espero que tenha lhe ajudado :)

solução!

Boa tarde Caue!

Descobri qual o erro, segue explicação.

A primeira coisa que temos que entender para saber o que está dando errado em seu código, é que Variáveis declaradas com var, dentro de funções, só "existem" dentro da function em que elas foram declaradas.

no seu código, você declarou as variáveis da posição do alvo, dentro da "function newInterval ()", desta forma, na quando você precisa dos dados de Yrandom e Xrandom na função "function dispara ()", esses valores simplismente não existem.

A correção é simples, é só declarar as variáveis fora de todas as funções, ficando desta forma:

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

<script>
    var Yrandom;
    var Xrandom;
    var canvas = document.querySelector('canvas');
    var pincel = canvas.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 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

    }

    function limpaTela() {

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

    }

    function sorteia (maximo) {

       return Math.round (Math.random () * maximo);

    }

    function newInterval () {

      limpaTela();
      Yrandom = sorteia(400);
      Xrandom = sorteia(600);
      desenhaAlvo(Xrandom, Yrandom);

     }

    var Yrandom=0;
    var Xrandom=0;
    setInterval(newInterval, 2500);

    function dispara(evento) {

        var x = evento.pageX - canvas.offsetLeft;
        var y = evento.pageY - canvas.offsetTop;
        console.log(x);
        console.log(y);

         if ((x > Xrandom - raio)
          && (x < Xrandom + raio)
          && (y > Yrandom - raio)
          && (y < Yrandom + raio)) {

            alert('Acertou');
        }
    }

    canvas.onclick = dispara;

</script>

Espero ter ajudado!

caso não de certo nos avise aqui.

o prazo da gente testar e responder alguém já respondeu rs.

bom saber que a comunidade aqui é bem atenta às perguntas no Forum,

Obrigado Thiago.

Muito obrigado a vocês dois! Os dois deram certo rs. Só posso marcar um mas mesmo assim muito obrigado aos dois