Gioco confronta numeri in JavaScript

In questa lezione vi spiego passo passo come realizzare un semplice gioco che confronta i numeri in JavaScript.

Lo scopo di questo gioco, adatto a far giocare dei bambini della primaria, è quello di approfondire l’utilizzo delle funzioni, il metodo getElementById, la classe className, ecc.

Innanzitutto provate il gioco base cliccando sul pulsante gioca in basso, oppure andate al seguente link per il gioco completo: gioco confronta numeri.

Confronta i numeri!

Gioco confronta numeri in JavaScript – Implementazione

Innanzitutto costruiamo la sezione html del gioco. Inseriamo un div che conterrà il primo numero, poi una select con le opzioni (maggiore, minore, uguale) e poi un altro div che contiene il secondo numero.

Inseriamo poi due pulsanti, uno per verificare la correttezza delle risposte e l’altro per far partire il gioco.

Infine sotto inseriamo un div in cui scriveremo il risultato.

Ecco dunque una possibile implementazione:

Personalizziamo adesso il codice html con il CSS.

Creiamo le classi per i numeri, per la select e per i pulsanti. Dopo creiamo anche le classi visible e invisible per nascondere o visualizzare gli elementi nella pagina web.


#game{
     border-radius: 5px;
     background-color: #3889c4;
     margin-top: 30px;
     padding: 20px;
     max-width: 500px;
     margin: auto;
     text-align: center;
}
#number_one, #number_two{
     color: white;
     font-size: 28px;
     text-align: center;
     padding:10px;
}
select#confronto{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 5px;
     padding: 5px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
}
#button-verifica, #button-play{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 25px;
     padding: 10px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
 }     
#button-verifica:hover{
     background-color: #16486c;
}
div#risultato{
     max-width: 300px;
     margin: 10px auto;
     border: 1px solid #87c6f4;
     border-radius: 15px;
     background-color: #87c6f4;
     padding: 10px;
     font-size: 26px;
 }
.invisible{
     display: none;
 }
.visible{
     display: inline;
}

Programmiamo adesso la parte di JavaScript.

Innantitutto creiamo lo script del pulsante gioca. Appena si clicca sul pulsante dobbiamo far si che si generino due numeri random e si posizionino nei div opportuni.


let num1;
let num2;
let tentativi = 3;
let punteggio = 0;

document.getElementById("button-play").addEventListener("click", gioca);

function random_number() {
    const num = Math.round(Math.random() * 100);
    return num;
}

function gioca() {
    num1 = random_number();
    num2 = random_number();
    
    document.getElementById('number_one').innerHTML = num1;
    document.getElementById('number_two').innerHTML = num2;

    document.getElementById('button-play').className = "invisible";
    document.getElementById('button-verifica').className = "visible ";
    document.getElementById('confronto').className = "visible";
   
  }

Gestiamo il controllo della risposta. Impostaimo 3 tentativi in tutto e ad ogni click sul pulsante verifica decrementiamo la variabile tentativo di 1. Poi controlliamo se i numeri soddisfano la condizione scelta. Se si, assegniamo un punto, altrimenti diciamo che ha sbagliato a rispondere.


document.getElementById("button-verifica").addEventListener("click", controllo);

function controllo() {
    tentativi -= 1;

    let confronto = document.getElementById('confronto').value;

    if (num1 == num2 && confronto == "uguale" 
        || num1 < num2  && confronto == "minore" 
        || num1 > num2 && confronto == "maggiore"){
        punteggio += 1;
        document.getElementById("risultato").innerHTML = 'Ottimo! Punti: ' + punteggio;    
      } else {
        document.getElementById("risultato").innerHTML = 'Hai sbagliato, concentrati!';
      } 
      if(tentativi > 0){
        gioca()
      } else {
        document.getElementById("risultato").innerHTML = 'Totale: ' + punteggio;
        document.getElementById("button-play").innerHTML = 'Rigioca';
        document.getElementById('number_one').innerHTML = " ";
        document.getElementById('number_two').innerHTML = " ";
        document.getElementById('button-verifica').className = "invisible ";
        document.getElementById('confronto').className = "invisible ";
        document.getElementById('button-play').className = "visible";
        punteggio = 0;
        tentativi = 3;
      }
}

Chiaramente questa è solo una possibile implementazione del gioco confronta numeri in JavaScript, divertitevi a creare la vostra versione.

Lezione precedente: Memory game in JavaScript

Lezione successiva: Le funzioni in JavaScript