2
respostas

Minha Dúvida, implementação código aula

Boa tarde gente, então, eu queria implementar o código aprendido para que no jogo subíssemos de nível depois de certa quantidade de alvos acertados, assim o alvo ficaria cada vez mais rápido, porém não estou conseguindo realizar isso, alguém pode me ajudar? Meu código até o momento:

<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;
    var nivel = 1;

    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, raio, 'red');

    }

    function sorteiaPosicao(maximo) {

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

    }

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

setInterval(atualizaTela, 1500);

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!');
        nivel++;

    }

    if (nivel > 5) {
        alert('Uau parabéns, você subiu de nível, agora as coisas ficarão mais difíceis! Boa sorte!');
    }


}

tela.onclick = dispara;

</script>
2 respostas

Oi Dayane

Eu fiz algumas alterações no seu código para ter os níveis, utilizei sua lógica mesmo com uns incrementos. Está comentado o que fiz:

<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;
  var nivel = 1;

  // Criei uma variável para receber o id do setInterval
  var interval;

  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, raio, 'red');
  }

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

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

  // criei uma função para iniciar o jogo e irei utiliza-la para aumentar o nível
  function iniciarJogo(velocidade) {
    clearInterval(interval); // é preciso cancelar o intervalo anterior
    interval = setInterval(atualizaTela, velocidade); // aqui eu adicionei uma variável velocidade
  }

  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!');
      nivel++;

      // o If do nível precisa estar dentro do IF do alvo pra não aparecer sempre que clicar em qualquer lugar da tela
      if (nivel == 5) {
        alert(
          'Uau parabéns, você subiu de nível, agora as coisas ficarão mais difíceis! Boa sorte!'
        );
        iniciarJogo(1000); // aqui eu inicio o jogo novamente com a nova velocidade
      }

      if (nivel == 10) {
        alert(
          'Uau parabéns, você subiu de nível, agora as coisas ficarão mais difíceis! Boa sorte!'
        );
        iniciarJogo(500); // aqui eu inicio o jogo novamente com a nova velocidade
      }
    }
  }

  tela.onclick = dispara;

  iniciarJogo(1500); // aqui eu inicio o jogo com a primeira velocidade
</script>

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

Olá, colega! Essa é minha implementação, peguei alguns detalhes da sua e tentei aprimorar.

<meta charset="UTF-8">

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

<script>

    var canvas = document.querySelector("canvas");
    var pincel = canvas.getContext("2d");


    var raio = 10;
    var xAleatorio = sorteia(600);
    var yAleatorio = sorteia(400);
    var nivel = 1;
    var velocidade = 1000;

    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, raio, "red");
    }

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

    function atualizaTela() {
        limpaTela();

        xAleatorio = sorteia(600);
        yAleatorio = sorteia(400);
        desenhaAlvo(xAleatorio, yAleatorio);
    }

    function exibeAlertaAcerto(evento) {
        var x = evento.pageX - canvas.offsetLeft;
        var y = evento.pageY - canvas.offsetTop;

        if ((x > xAleatorio - raio) 
                && (x < xAleatorio + raio)
                    && (y > yAleatorio - raio)
                        && (y < yAleatorio+ raio)){
            alert("ACERTOU!");
        exibeAlertaNivel();
        nivel++;
        }
    }

    function exibeAlertaNivel() {
        if (nivel == 5) {
            alert("Uau, parabéns! Você chegou ao 5° nível. Atente-se, sua dificuldade também aumentou.");
        } else if (nivel == 10) {
            alert("Uau, você me surpreendeu e chegou ao nível supremo! Irei aumentar as suas dificuldade.")
        }
    }

    if (nivel >= 20) {
        setInterval(atualizaTela, velocidade - 750);
    } else if (nivel >= 10) {
        setInterval(atualizaTela, velocidade - 500);
    } else if (nivel >= 5) {
        setInterval(atualizaTela, velocidade - 250);
    } else {
        setInterval(atualizaTela, velocidade);
    }

    canvas.onclick = exibeAlertaAcerto;

</script>