Skip to main content
2 de 2
Commonmark migration

O modo que você estava fazendo a contagem estava errado. A função animate espera no 4º parâmetro uma função para ser executada ao completar a animação, mas no caso você tentava associar o click na nave ali.

Criei um pen no CodePen com o seu código e fiz algumas modificações, que você pode ver completo aqui (pode mudar a visão para editor para ler os fontes modificados): https://codepen.io/dudaskank/full/jvMjoO/

Vou comentar as alterações que fiz para funcionar o jogo:


Tamanho do texto do placar

Estava grande demais e não cabia na área destinada, então só diminuí a fonte no CSS:

p#bolt3 {
  position: relative;
  left: 5%;
  font-size: 1rem;
}

Variável para a nave e função do click ajustada

O seletor da nave era usado em diversos pontos, simplifiquei a coisa e guardei numa variável, assim não perde tempo procurando ele em outros pontos.

A função do click original estava em um local errado, coloquei ela logo no início do javascript e, ao invés de contar e atualizar o placar, seta uma flag no próprio elemento informando que clicou nela. Mais para frente será utilizada.

  var nave = $(".in, .bolt2");
  nave.click(function() {
    console.log('acertou');
    $(this).data('acertou', true);
  });

Novo jogo - resetando animação atual e mudando uns números

Se você clicar em jogar durante um jogo correndo, originalmente precisa esperar o jogo acabar para depois começar o outro jogo. Chamando o método finish ele finaliza as animações atuais imediatamente, ficando pronto para o próximo jogo na mesma hora.

Mudei também os números pra deixar mais fácil pra eu jogar (easy mode?) e removi variáveis não usadas. Também simplifiquei os ajustes para o left da nave, usando um vetor com os valores possíveis, e modificando direto com a função css do jQuery.

$(".move").click(function() {
  // para as aminações atuais e começa de novo
  nave.finish();
  // vetor com os percentuais do 'left'
  var vetLeft = [ '26%', '30%', '36%', '40%', '43%', '48%', '52%', '60%', '68%' ];
  var g = 1;
  var r = 2000;
  var i = 0;
  var div = document.getElementById("bolt3");
  // primeiro, concateno '000' com o valor de i, e em seguida pego apenas os 4 últimos caracteres da string resultante
  // bem mais simples do que o monte de if's
  div.innerHTML = ('000' + i).slice(-4);
  while (g <= 5) {
    r -= 100;
    nave.animate({'top':'10%'}, 0, 'linear', function(){
      nave.css('display', 'block');
      // troquei aquele monte de if/animate por estas duas linhas
      var leftPct = vetLeft[Math.floor(Math.random()*vetLeft.length)];
      nave.css("left", leftPct);
    });
    // continua...

Hora de contar o placar

Para finalmente contar o placar, usei a 2ª forma documentada da função animate, onde passo as propriedades que serão animadas e as opções. Dentre as opções, está a progress, que chama uma função em cada quadro da animação. Aqui, verifico o flag do elemento nave, somo e já atualizo o placar. Lembre de setar para falseo flag aqui, senão em cada passo somará um ponto.

    // continuando...
    nave.animate(
      { top: "75%" },
      {
        duration: r,
        easing: "linear",
        progress: function () {
          // durante a animação, verifica se o flag da nave foi setado pelo evento de clique
          if (nave.data('acertou')) {
            i += 1;
            div.innerHTML = ('0000' + i).slice(-4);
            nave.data('acertou', false);
          }
        },
      }
    );
    g += 1;
  }
});

FIM

Espero que consiga entender o que ajustei, e boa sorte no desenvolvimento de jogos.

Dudaskank
  • 1,9mil
  • 9
  • 9