Esercizio JavaScript: crea un gioco indovina il numero

Questa esercitazione è pensata per aiutarvi a mettere in pratica i concetti di base di JavaScript appresi nel tutorial. Creerete un gioco di indovina-numero che mobilita variabili, condizioni, funzioni, oggetti e classi (ES6), la manipolazione della pagina HTML, gli eventi e i gestori di eventi, oltre ai moduli e alle importazioni/esportazioni (ES6).

Questa esercitazione è ideale per chi inizia con JavaScript e vuole mettere in pratica le proprie conoscenze e capire meglio gli elementi di base del linguaggio. Tornate pure al tutorial se avete difficoltà: le risposte sono lì, tranne le classi, presentate nell’articolo su le classi in JavaScript.

File da creare

• game.js (modulo di importazione che contiene la classe del gioco)
• script.js (file principale che importa il modulo game.js)
• index.html (con il codice seguente)

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

Istruzioni

1. Nel file game.js dichiara una classe Game con le proprietà e i metodi seguenti:

   • Una proprietà randomNumber che contiene un numero casuale compreso tra 1 e 100 (usa Math.random() e Math.floor())
   • Una proprietà attempts che contiene il numero di tentativi dell’utente
   • Una proprietà found che indica se il numero è stato trovato o no (valore booleano)
   • Un metodo checkNumber che riceve un numero come argomento e verifica se è quello giusto, confrontando il valore inserito dall’utente con il numero casuale. Se il numero è corretto, imposta a vero la proprietà found. Se è sbagliato, mostra un messaggio che dice se il numero da trovare è più grande o più piccolo.
   • Un metodo resetGame che riporta le proprietà attempts e found al loro valore iniziale e sceglie un nuovo numero casuale.

2. Nel file script.js importa il modulo game.js con l’istruzione import. Crea un’istanza della classe Game e salvala in una variabile.

3. Sempre nel file script.js, scrivi una funzione per gestire l’evento di invio del form. Questa funzione dovrà:

   • Incrementare il contatore dei tentativi dell’istanza della classe Game
   • Recuperare il valore del numero inserito dall’utente
   • Usare il metodo checkNumber dell’istanza della classe Game per verificare se il numero è corretto
   • Se la risposta è giusta, restituire un messaggio di congratulazioni, altrimenti mostrare il messaggio di checkNumber.

4. Collega l’evento di invio del form alla funzione creata al punto precedente.

5. Aggiungi un gestore di eventi per il clic sul pulsante «Gioca di nuovo» che si trova nel messaggio di congratulazioni. Questa funzione dovrà usare il metodo resetGame dell’istanza della classe Game per azzerare il gioco e cancellare il messaggio di congratulazioni e il form di inserimento del numero.

6. Collega il file JavaScript giusto alla tua pagina index.html

7. Prova il gioco aprendo il file index.html in un browser. Verifica che funzioni correttamente e che rispetti le istruzioni.

Soluzione

Ecco una soluzione possibile, testata in un browser. La classe vive in 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 la classe, ascolta il form e mostra il messaggio:

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);

Resta da collegare lo script alla pagina, subito prima di </body>. L’attributo type="module" è indispensabile perché l’istruzione import funzioni, e i moduli non si caricano da un file aperto direttamente (file://): servite la cartella con un piccolo server locale, per esempio npx serve o l’estensione Live Server di VS Code.

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

Lo stesso linguaggio fa girare giochi molto più ricchi. Clairbois, un piccolo RPG scritto in JavaScript dall’IA Codex, si gioca direttamente nel nostro articolo su come creare un gioco con ChatGPT.

Spero che questo tutorial di JavaScript per principianti ti sia stato utile: ora dovresti avere le basi del linguaggio. Ti invito a girare per il sito, troverai altri tutorial e articoli su JavaScript per migliorare ancora le tue competenze.