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 false
o 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.