1
resposta

Na ultima função o console diz erro ou excesso de simbolo não comsigo arrumar.

<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');
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, 10, 'red');
    }

    function sorteiaPosiçao(maximo){
        return Math.floor(Math.random() * maximo);

    }


    function atualizaTela(){
        limpaTela();
        var xAleatorio = sorteiaPosiçao(600);
        var yAleatorio = sorteiaPosiçao(400);


        desenhaAlvo(xAleatorio, yAleatorio);
    }    

    setInterval (atualizaTela, 5000);

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;

        var y = evento.pageY - tela.offsetTop;

        if((x > Aleatorio - raio) 
        && (x < xAleatorio + raio) 
        && ((y > Aleatorio - raio) 
        && (y < yAleatorio + raio)) {

            alert('acertou');
        }

    }

    tela.onclick = dispara;

</script>
1 resposta

Olá Mariana.

Tem um parêntese a mais nessa linha dentro da função dispara:

&& ((y > Aleatorio - raio)

As variáveis xAleatorio e yAleatorio estão sendo criadas novamente nas linhas abaixo que estão dentro da função atualizaTela. Retire a declaração das variáveis e apenas atribua o valor a elas, pois elas já foram declaradas no começo do código.

var xAleatorio = sorteiaPosiçao(600);
var yAleatorio = sorteiaPosiçao(400);

Segue abaixo o código corrigido:

<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 Aleatorio;
  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');
    desenhaCirculo(x, y, raio + 10, 'white');
    desenhaCirculo(x, y, 10, 'red');
  }

  function sorteiaPosicao(maximo) {
    return Math.floor(Math.random() * maximo);
  }

  function atualizaTela() {
    limpaTela();
    xAleatorio = sorteiaPosicao(600);
    yAleatorio = sorteiaPosicao(400);


    desenhaAlvo(xAleatorio, yAleatorio);
  }

  setInterval(atualizaTela, 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>