Capítulo 12 de 12

Exercício prático de JavaScript: jogo de adivinhar o número

verificado a 7 Setembro 2026 · 5 min

Este exercício foi concebido para o ajudar a pôr em prática os conceitos básicos de JavaScript que aprendeu no tutorial. Vai criar um jogo de adivinhar números que mobiliza as variáveis, as condições, as funções, os objetos e as classes (ES6), a manipulação da página HTML, os eventos e os gestores de eventos, bem como os módulos e as importações/exportações (ES6).

Este exercício é ideal para principiantes em JavaScript que querem pôr em prática os seus conhecimentos e compreender melhor os elementos básicos da linguagem. Não hesite em voltar ao tutorial se tiver dificuldades: as respostas estão lá, com exceção das classes, apresentadas no artigo sobre as classes em JavaScript.

Ficheiros a criar

game.js (módulo de importação que contém a classe do jogo)
script.js (ficheiro principal que importa o módulo game.js)
index.html (com o código seguinte)

html

<!DOCTYPE html>
<html>
<head>
    <title>Jeu de devinette de nombres</title>
    <style>
        body {
            background-color: #e0e0e0;
        }

h1 {
            font-size: 24px;
            text-align: center;
            color: #333;
        }

#form {
            display: flex;
            justify-content: center;
        }

#number {
            width: 50px;
            margin-right: 10px;
            font-size: 16px;
            text-align: center;
        }

button {
            font-size: 16px;
            padding: 10px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>Jeu de devinette de nombres</h1>
<p id="message"></p>
<form id="form">
    <input type="number" id="number">
    <button type="submit">Deviner</button>
</form>
</body>
</html>

Instruções

No ficheiro game.js, declara uma classe Game com as seguintes propriedades e métodos:
- Uma propriedade randomNumber que contém um número aleatório entre 1 e 100 (usa Math.random() e Math.floor())
- Uma propriedade attempts que contém o número de tentativas do utilizador
- Uma propriedade found que indica se o número foi ou não encontrado (valor booleano)
- Um método checkNumber que recebe um número como argumento e verifica se está certo, comparando o valor introduzido pelo utilizador com o número aleatório. Se o número estiver certo, põe a propriedade found a verdadeiro. Se estiver errado, mostra uma mensagem a dizer se o número é maior ou menor.
- Um método resetGame que repõe as propriedades attempts e found no valor inicial e escolhe um novo número aleatório.
No ficheiro script.js, importa o módulo game.js com a instrução import. Cria uma instância da classe Game e guarda-a numa variável.
No ficheiro script.js, escreve uma função para tratar o evento de submissão do formulário. Essa função tem de:
- Incrementar o contador de tentativas da instância da classe Game
- Obter o valor do número introduzido pelo utilizador
- Usar o método checkNumber da instância da classe Game para verificar se o número está certo
- Se a resposta estiver certa, devolver uma mensagem de parabéns, caso contrário, enviar a mensagem do checkNumber.
Associa o evento de submissão do formulário à função criada antes.
Acrescenta um gestor de eventos para tratar o clique no botão «Jogar de novo» que aparece na mensagem de parabéns. Essa função tem de usar o método resetGame da instância da classe Game para reiniciar o jogo e apagar a mensagem de parabéns e o formulário de introdução do número.
Liga o ficheiro javascript certo à tua página index.html
Testa o teu jogo abrindo o ficheiro index.html num browser. Confirma que funciona corretamente e que cumpre as instruções.

Solução

Eis uma solução possível, testada num navegador. A classe vive em game.js:

game.js

export default class Game {
  constructor() {
    this.resetGame();
  }

  resetGame() {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.attempts = 0;
    this.found = false;
  }

  checkNumber(number) {
    if (number === this.randomNumber) {
      this.found = true;
      return 'Bravo, vous avez trouvé !';
    }
    return number < this.randomNumber ? 'Le nombre est plus grand.' : 'Le nombre est plus petit.';
  }
}

script.js importa a classe, escuta o formulário e mostra a mensagem:

script.js

import Game from './game.js';

const game = new Game();
const form = document.getElementById('form');
const input = document.getElementById('number');
const message = document.getElementById('message');

function replay() {
  game.resetGame();
  message.textContent = '';
  form.hidden = false;
  input.focus();
}

function handleSubmit(event) {
  event.preventDefault();
  game.attempts += 1;
  const result = game.checkNumber(Number(input.value));
  input.value = '';

  if (game.found) {
    message.innerHTML = `Bravo, trouvé en ${game.attempts} tentative(s) ! <button type="button" id="replay">Jouer à nouveau</button>`;
    form.hidden = true;
    document.getElementById('replay').addEventListener('click', replay);
  } else {
    message.textContent = result;
  }
}

form.addEventListener('submit', handleSubmit);

Falta ligar o script à página, mesmo antes de </body>. O atributo type="module" é indispensável para que a instrução import funcione, e os módulos não carregam a partir de um ficheiro aberto diretamente (file://): sirva a pasta com um pequeno servidor local, por exemplo npx serve ou a extensão Live Server do VS Code.

index.html

<script type="module" src="script.js"></script>

Espero que este tutorial de JavaScript para principiantes te tenha sido útil. Já deves ter as bases da linguagem, percorre o site, vais encontrar vários tutoriais e artigos sobre JavaScript para continuares a melhorar as tuas competências.

Exercício prático de JavaScript: jogo de adivinhar o número

Ficheiros a criar

Instruções

Solução

Os novos testes, tutoriais e projetos, por e-mail.