Gioco indovina numero in JavaScript con il DOM

In questa lezione svilupperemo il gioco indovina numero in JavaScript utilizzando il DOM. Il gioco “Indovina il Numero” è un gioco interattivo in cui l’utente ha l’obiettivo di indovinare un numero segreto generato casualmente dal computer.

Il gioco da realizzare sarà dunque simile a questo:

Gioca!

Prova il gioco inserendo il numero da indovinare nella casella di input:

Funzionamento del gioco indovina numero

Ecco una descrizione del funzionametno del gioco:

1. Inizializzazione del gioco:
   • Al caricamento della pagina, il computer genera casualmente un numero compreso tra 1 e 100 e assegna questo numero come il "numero segreto".
   • Il gioco inizia con un numero fisso di tentativi (nel codice fornito, sono 5 tentativi).
2. Input dell'utente:
   • L'utente inserisce un numero nell'apposito campo di input e preme il pulsante "Conferma" per inviare il suo tentativo.
3. Feedback:
   • Il gioco fornisce un feedback all'utente basato sul suo tentativo:
     • Se il numero inserito è uguale al numero segreto, l'utente ha indovinato e riceve un messaggio di congratulazioni.
     • Se il numero è diverso, il gioco fornisce un suggerimento indicando se il numero segreto è più alto o più basso.
     • Viene anche aggiornato il numero di tentativi rimanenti.
4. Fine del gioco:
   • Il gioco continua finché l'utente indovina il numero segreto o esaurisce tutti i tentativi.
   • Se l'utente indovina, il gioco termina con un messaggio di successo.
   • Se l'utente esaurisce i tentativi, il gioco termina e viene mostrato il numero segreto.
5. Nuova Partita:
   • Dopo che il gioco è terminato (indipendentemente dal risultato), l'utente può iniziare una nuova partita premendo il pulsante "Nuova Partita". Questo reimposta il gioco, genera un nuovo numero segreto e riporta il numero di tentativi al valore iniziale.

L'obiettivo del gioco è indovinare il numero segreto nel minor numero possibile di tentativi. È un gioco semplice, ma può essere divertente e coinvolgente mentre gli utenti cercano di affinare le loro capacità di deduzione.

Sviluppiamo passo passo il gioco usando html, css e JavaScript ma prima guardiamo il risultato di ciò che dobbiamo creare.

Gioco indovina numero - codice html

<div class="container">
    <h2>Indovina il Numero</h2>
    <p>Inserisci un numero compreso tra 1 e 100:</p>
    <input type="number" id="userGuess" min="1" max="100">
    <button id="check">Conferma</button>
    <p id="message"></p>
    <p id="attempts">Tentativi rimanenti: <span id="remainingAttempts"></span></p>
    <button id="new">Nuova Partita</button>
</div>

Nel codice HTMl ho inserito un <div class="container"> che serve come contenitore generico. Poi ho inserito una casella di input di tipo number <input type="number" id="userGuess" min="1" max="100"> che consente all'utente di inserire il numero da indovinare. Ho inserito gi attributi min e max per specificare il range consentito, in modo tale da prevenire l'inserimento di valori indesiderati.

Dopo ho inserito un <button id="check">Conferma</button>. Questo è un pulsante con l'ID "check" sarà utilizzato per confermare il numero inserito dall'utente. In un pragrafo vuoto <p id="message"></p> facciamo visualizzare un messaggio del tipo: "Troppo alto", "Troppo basso" o "Corretto" in base al numero inserito dall'utente.

Un altro paragrafo <p id="attempts">Tentativi rimanenti: <span id="remainingAttempts"></span></p> fa visualizzare i tentativi rimanenti. L'ID "remainingAttempts" sarà utilizzato per inserire dinamicamente il numero di tentativi rimanenti.

Infine ho inserito un button <button id="new">Nuova Partita</button> che sarà utilizzato per avviare una nuova partita.

Gioco indovina numero - codice css

Diamo una formattazione a piacere al foglio di stile. Date pure al vostra formattazione a piacere.

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background-color: #ffffcc; 
    padding: 60px; 
    border-radius: 20px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


p {
    color: #555;
    margin-bottom: 20px;
}

input {
    padding: 15px; 
    font-size: 18px; 
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 80px;
}

button {
    padding: 15px 30px; 
    font-size: 18px;
    cursor: pointer;
    background-color: #6600ff; 
    color: #fff;
    border: none;
    border-radius: 8px;
}

button:hover {
    background-color: #2c53ff; 
}

#message {
    color: #900C3F;
    font-size: 20px;
    margin-top: 30px; 
}

#attempts {
    color: #333;
    font-size: 18px;
    margin-top: 20px; 
}

button:disabled {
    background-color: #ddd;
    color: #666;
    cursor: not-allowed;
}

Gioco indovina numero - codice JavaScript

Realizziamo il codice JavaScript per far funzionare il programma indovina numero:

let secretNumber;
let attempts;
const gameContainer = document.querySelector(".container");

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function initGame() {
    secretNumber = getRandomNumber(1, 100);
    attempts = 5;
    updateAttemptsDisplay();
}

function checkGuess() {
    const userGuessInput = document.getElementById("userGuess");
    const userGuess = parseInt(userGuessInput.value);

    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        showMessage("Inserisci un numero valido tra 1 e 100.", "red");
        return;
    }

    attempts--;

    if (userGuess === secretNumber) {
        showMessage("Congratulazioni! Hai indovinato il numero!", "green");
        disableInputAndButtons();
    } else {
        const message = userGuess < secretNumber ? "Troppo basso!" : "Troppo alto!";
        showMessage(message, "red");
    }

    updateAttemptsDisplay();

    if (attempts === 0) {
        showMessage(`Hai esaurito tutti i tentativi. Il numero segreto era ${secretNumber}.`, "red");
        disableInputAndButtons();
    }
}

function updateAttemptsDisplay() {
    document.getElementById("remainingAttempts").textContent = attempts;
}

function showMessage(message, color) {
    const messageElement = document.getElementById("message");
    messageElement.textContent = message;
    messageElement.style.color = color;
}

function disableInputAndButtons() {
    document.getElementById("userGuess").disabled = true;
    document.getElementById("check").disabled = true;
    document.getElementById("new").disabled = true;
}

function resetGame() {
    const userGuessInput = document.getElementById("userGuess");
    userGuessInput.value = "";
    userGuessInput.disabled = false;

    document.getElementById("check").disabled = false;
    document.getElementById("new").disabled = false;

    initGame();
    showMessage("", "black");
}

document.getElementById("check").addEventListener("click", checkGuess);
document.getElementById("new").addEventListener("click", resetGame);

window.onload = initGame;

Spiegazione del codice

Abbiamo innanzitutto realizzato la funzione getRandomNumber seguendo anche le indicazioni di w3schools raggiungibile al link: funzione random in JavaScript.

Di seguito ecco una spiegazione della funzione getRandomNumber(min, max):

• Questa funzione genera un numero casuale compreso tra i valori min e max inclusi.
• Utilizza Math.random() per generare un numero casuale compreso tra 0 (incluso) e 1 (escluso), quindi moltiplica per (max - min + 1) per estendere il range.
• Math.floor() arrotonda il risultato verso il basso per ottenere un numero intero.

Poi abbiamo creato la funzione initGame() che serve ad inizializzare il gioco e dunque richiamare la funzione precedentemente creata getRandomNumber(1, 100) per generare un numero segreto compreso tra 1 e 100. Sempre in questa funzione impostiamo i tentativi massimi a 5 e richiamiamo la funzione updateAttemptsDisplay() per aggiornare il display dei tentativi rimanenti.

Quindi entriamo nel cuore del programma sviluppando la funzion checkGuess() che verifica il numero inserito dall'utente. Se l'input non è un numero valido tra 1 e 100, mostra un messaggio di errore ed esce dal programma con un return. Poi recrementa il numero di tentativi. Se l'utente indovina il numero segreto, mostra un messaggio di congratulazioni e disabilita l'input ed il pulsante di conferma, altrimenti se l'utente sbaglia, mostra un messaggio "Troppo basso!" o "Troppo alto!" a seconda del tentativo. Quindi aggiorna il display dei tentativi rimanenti. Controllaimo anche se l'utente esaurisce tutti i tentativi, mostrando il numero segreto e disabilitando l'input e il pulsante di conferma.

La funzione updateAttemptsDisplay() si occupa di aggiornare il display dei tentativi rimanenti con il numero di tentativi attuali, mentre la funzione showMessage(message, color) mostra un messaggio all'utente nel div messageElement ed imposta il testo del messaggio e il colore del testo.

Poi ho sviluppato la funzione disableInputAndButton() per disabilitare l'input dell'utente e il pulsante di conferma ed infine la funzione resetGame() che serve a ripristina il gioco per una nuova partita compiendo i seguenti passaggi:

• Pulire l'input dell'utente.
• Abilitare l'input dell'utente e il pulsante di conferma.
• Inizializzare nuovamente il gioco chiamando initGame().
• Nascondere eventuali messaggi precedenti impostando il testo a nero.

Inizializzamo il gioco al caricamento della pagina definendo le variabili globali secretNumber e attempts.

Dunque al caricamento della pagina, inizializzamo il gioco chiamando initGame().

Conclusione

Questa versione personalizzata del gioco dell'indovina numero in JavaScript con il DOM offre un'esperienza interattiva e coinvolgente. Una volta trovata la soluzione, il gioco fornisce un feedback immediato. Spero che questa implementazione renda il gioco divertente per chiunque lo giochi!

Link Utili

Corso su JavaScript

1. Gioco della morra cinese in JavaScript
2. Giochi in JavaScript – Semplice quiz utilizzando gli array
3. Come realizzare il gioco dei dadi online
4. Come sviluppare il gioco del 15 in JavaScript
5. Gioco della slot machine in JavaScript
6. Memory Game in JavaScript
7. Confrontare dei numeri