[Projeto] [projeto] Desenvolva um Jogo e Pratique Lógica de Programação | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

<html>

<head>
  <title>
   Oracle
  </title>
</head>

<body>
  <div class="container">
    <h1 class="page-title">
      Oracle
    </h1>
    <h2 class="page-subtitle">
      Você consegue adivinhar o número?
    </h2>
    <input type="number" id="valor" /><br>
    <button type="submit" onclick="Chutar()">Chutar</button>
    <h3 class="resultado" id="resultado"></h3>
  </div>
  </a>
  <script src="app.js"></script>
</body>

</html>

CSS
body {
  font-family: "Colibri", "Comic Sans";
  min-height: 600px;
  background-image: url("https://wallpaperaccess.com/full/158435.jpg");
  background-color: #000000;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.container {
  text-align: center;
  padding: 40px;
  height: 100vh;
}

.page-title {
  color: #ffffff;
  margin: 0 0 5px;
}

.page-subtitle {
  color: #ffffff;
  margin-top: 16px;
}

@media (max-height: 500px) {
  body {
    min-height: 800px;
  }
}

input {
  margin: 6px;
  padding: 8px;
  border-radius: 5px;
}

button {
  margin-top: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  background: #ffffff;
}

.resultado {
  color: #ffffff;
  text-align: center;
  margin-top: 16px;
}

JS
var numeroSecreto = parseInt(Math.random() * 10);
var maximoTentativas = 5;
var contador = 0;

function Chutar() {
  var resultado = document.getElementById("resultado");
  var chute = parseInt(document.getElementById("valor").value);
  console.log(chute);
  if (chute == numeroSecreto) {
    resultado.innerHTML = "Parabéns você consegiu!";
  } else if (chute > 100 || chute < 0) {
    resultado.innerHTML = "Use números de 0 a 10.";
  } else if (chute > numeroSecreto) {
    resultado.innerHTML =
      "O que acha de tentar um número menor? pode funcionar.";
    contador++;
  } else if (chute < numeroSecreto) {
    resultado.innerHTML =
      "Vamos lá! você consegue! tenta um número maior.";
    contador++;
  }
  if (contador > maximoTentativas) {
    resultado.innerHTML =
      "Você atingiu o número máximo de tentativas. O número secreto é " +
      numeroSecreto +
      "tente outra vez!";
  }
}

Mergulhe em programação