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

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)

<!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

1. 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.

2. 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.

3. 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.

4. Associa o evento de submissão do formulário à função criada antes.

5. 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.

6. Liga o ficheiro javascript certo à tua página index.html

7. 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:

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:

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.

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

A mesma linguagem faz correr jogos bem mais ricos. O Clairbois, um pequeno RPG escrito em JavaScript pela IA Codex, pode ser jogado diretamente no nosso artigo sobre como criar um jogo com ChatGPT.

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.