Olá senhores, também gostaria de implementar a lógica de reiniciar o jogo a qualquer instante e pensei no mesmo mecanismo do Daniel. Mas esta implementação (a dele e a minha) têm um bug que não consegui entender o motivo. Poderiam analisar o código e verificar o que está acontencendo? O bug acontece quando se digita algumas palavras e antes do tempo terminar reiniciamos o jogo. Ao fazer isto algumas vezes o contador não mais respeita o limite de zero e começa a apresentar números negativos.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
</head>
<body>
<h1>Alura Typer</h1>
<p class="frase">Frase aleatória</p>
<ul class="informacoes">
<li><span id="tamanho-frase"></span> palavras</li>
<li><span id="tempo-digitacao">10</span> segundos</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<button id="botao-reiniciar">Reiniciar jogo</button>
<ul>
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/main.js" /></script>
</body>
</html>
JQUERY
var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();
var cronometroID = 0;
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length;
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);
}
function incicializaContadores() {
campo.on("input", function () {
var conteudo = campo.val();
var qtdPalavras = conteudo.split(/\S+/).length - 1;
$("#contador-palavras").text(qtdPalavras);
//conta apenas os caracteres sem considerar os espaços inseridos
$("#contador-caracteres").text(conteudo.replace(/\s+/g, '').length);
});
}
function inicializarCronometro() {
var tempoRestante = $("#tempo-digitacao").text();
console.log("inicio inicializarCronometro() var [tempo inicial]: " + tempoInicial);
console.log("inicio inicializarCronometro() var [tempo restante]: " + tempoRestante);
console.log("\n");
campo.one("focus", function () {
cronometroID = setInterval(function () {
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if (tempoRestante < 1) {
campo.attr("disabled", true);
console.log("parando cronometro ID: " + cronometroID + " em inicializarCronometro");
console.log("\n");
clearInterval(cronometroID);
cronometroID = 0;
}
}, 1000);
console.log("novo cronometro ID em focus: " + cronometroID);
});
console.log("fim inicializarCronometro() var [tempo inicial]: " + tempoInicial);
console.log("fim inicializarCronometro() var [tempo restante]: " + tempoRestante);
console.log("\n");
}
function reiniciarJogo() {
$("#botao-reiniciar").click(function () {
console.log("parando cronometro ID: " + cronometroID + " em reiniciarJogo");
console.log("\n");
campo.attr("disabled", false);
campo.val("");
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
clearInterval(cronometroID);
inicializarCronometro();
});
}
$(document).ready(function () {
atualizaTamanhoFrase();
incicializaContadores();
inicializarCronometro();
$("#botao-reiniciar").on("click", reiniciarJogo);
})
