Criar limitações com loop!

[Insanity 9]

Eu to estudando a apostila, mas nunca me limito a ela, sempre procuro desenvolver, exercitar as coisas do meu jeito (sempre o mais complicado rsrsrs)...

Então, eu criei o jogo do adivinhe o número. Mas eu queria criar a limitação de tentativas, que quando fosse igual ao limite mostrasse um alert e a página recarregasse...

Isso eu sei fazer, mas eu não consigo determinar o loop certo...

Eu coloque o seguinte:

var chance = 7;

while(chance <= 0){

document.getElementById('chance').innerHTML = chance + " chances";

chance = chance - 1;

}

Algo assim, não lembro pq apaguei diversas vezes...

OBS: não dá nenhum erro no Console do Chrome...

Html em anexo,

Agradeço desde já!

Esqueci de falar que esse document.getElementById('chance').innerHTML = chance + " chances"; é pra mostrar quantas tentativas sobram.

E não coloquei a condicional do limite pq tem que resolver isso primeiro, o resto eu sei...

 

 

 

 

Codigo Javascript:

var pensado = Math.round(Math.random() * 100);

function adivinha(){

var chutado = parseInt(document.getElementById("chutado").value);

if(chutado == ""){

alert("Você não escreveu o número!");

}

else if(isNaN(chutado)){

alert("Eu pensei em um número, amigo!");

}

else if(chutado > 100 || chutado < 0){

alert("Eu pensei em um número de 0 à 100!");

}

else if(pensado == chutado){

document.getElementById('result').innerHTML = "<font color=09ff00 class=rr>" + "Você acertou" + "</font>" + ", o número pensado foi " + "<font color=white class=rr>" + pensado + "</font>" + ".";

document.getElementById('rec').style.display = 'block';

}

else if(pensado > chutado){

document.getElementById('result').innerHTML = "<font color=red class=rr>" + "Você errou" + "</font>" + ", o número pensado é " + "<font color=00fbdb class=rr>" + "maior" + "</font>" + " que o chutado.";

}

else if(pensado < chutado){

document.getElementById('result').innerHTML = "<font color=red class=rr>" + "Você errou" + "</font>" + ", o número pensado é " + "<font color=gold class=rr>" + "menor" + "</font>" + " que o chutado.";;

}

else{

document.getElementById('result').innerHTML = "Você errou, o número pensado foi " + pensado + ".";

}

};

function recarregar(){

location.reload()

}

Codigo Html:

<form>

<p> Resultado: </p>

<div class="result" id="result"><font color="white" class="rr">Pensei em um número de 0 à 100, você tem 7 chances!</font></div>

<p id="chance"></p>

<p>Número Pensado:</p><input type="text" id="chutado" class="number" placeholder="Chute um número..."/><br>

<button type="button" onClick="adivinha();" class="sub" value="Acertei?" title="Veja se acertou!">Acertei?</button>

<input type="reset" class="clear" value="Limpar" title="Limpar Tudo"/>

</form>

<button type="button" onClick="recarregar();" class="subc" title="Jogar Novamente" id="rec">Jogar Novamente!</button>

 

[wanderval 19]

Bom amigo como seu jogo depende do usuario não acho que necessite de um laço de repetição mas sim de uma condicional tomei a liberdade de criar uma função e rodar seu codigo no finddle, a função decrementarChance() é chamada na condicional de "numero maior" e "numero menor"

 <p> Tentativas: <span id="chance">7 chances</span></p>

function decrementarChance(){ 
  if(chance > 0){
     chance--;
     document.getElementById('chance').innerHTML = chance + " chances";  
  }else{
      alert('game over!');
      location.reload();
  }
}

link do seu codigo com essas alterações: https://jsfiddle.net/Ljx9v2a0/

[Insanity 9]

Entendi, é que eu to começando agora, não me limito aos exercicios da apostila... Tento fazer sempre algo a mais! Compreendi o que foi explicado e deu certo aqui!

 

Muito Obrigado! Qualquer dúvida eu tiro aqui!

 

Valeu!

[wanderval 19]

fico feliz por ter ajudado! Bons estudos!