Eu pensei:
- será que funciona fazer um
functionPara odocument.querySelector? - será que da para focar no input assim que carrega?
- e colocar um texto no input como nos sites dizendo o que é para fazer?
- e se não só mostrar que errou...
- e se eu der mais tentativas?...
- e se eu disser se é maior ou menor...
- será que consigo colocar o "enter" para funcionar?
acho que fui um pouco demais, porém é legal praticar e queimar os miolos...
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Jogo da adivinhação!</title>
</head>
<body>
<h2>Bem vindo ao Jogo do segredo</h2>
<h3>Segredo é de 0 a 20 - Você tem 5 tentativas</h3>
<!--autofocus é para focar assim que carregar a página ||| placeholder é o texto na caixa do input -->
<input type="text" autofocus placeholder="Digite seu chute">
<button type="submit" name="Botão de Confirmar" >Chute!</button>
<script>
function pulalinha(){
document.write("<br>")
document.write("<br>")
}
function mostra(texto){
document.write(texto);
pulalinha();
}
///função para sortear um número aleatório
function sorteia(n){
return Math.round(Math.random()*n);
}
///função para chamar o querySelector
function seletor (texto){
return document.querySelector(texto);
}
var numeroPensado = sorteia(20);
console.log(numeroPensado);
var input = seletor("input");
alert("Bem vindo ao Jogo do adivinha 2")
var contadorDeChutes = 1;
///função do verifica com os extra... tentativas, alert para dizer que errou e se é maior ou menor...
function verifica(){
var chute = input.value;
if(input.value == numeroPensado){
alert("você acertou! O numero pensado era " + numeroPensado);
}else{
alert("Você errou! Seu chute "+ contadorDeChutes + "º foi " + chute + "!")
if (input.value > numeroPensado){
alert("o número pensado é menor... Você tem mais " + (5-contadorDeChutes) + " tentativas")
}
else{
alert("O número pensado é MAIOR... Você tem mais " + (5-contadorDeChutes) +" tentativas");
}
}
/// aqui quando termina as tentativas ele sai da página e carrega outra dizendo a mensagem e qual era o número sorteado...
if (contadorDeChutes == 5 && chute != numeroPensado) {
mostra("<h1>Você errou os 5 chutes e o número pensado era " + numeroPensado)
}
contadorDeChutes++;
}
var button = seletor("button");
///essa function é para chamar o botão no click do enter...
document.addEventListener("keypress", function(evento){if(evento.key==="Enter"){button.click()}});
button.onclick = verifica;
</script>
</body>
</html>Pelo menos funcionou...
