Slot machine JavaScript, gioco della slot-machine JS

In questo tutorial propongo una semplice versione di una slot machine in JavaScript.

Il gioco consiste nel cliccare su un pulsante e provare a vincere, facendo uscire 3 simboli uguali, nel nostro esempio sono delle faccine.

Solo se i simboli sono tutti e 3 uguali si ha una situazione di vittoria, altrimenti si perde.

Ecco dunque una demo del gioco Slot Machine in JavaScript:

Gioca alla slot machine

Il tuo risultato sarà visibile qui!

Slot Machine JavaScript – procedimento

Spieghiamo adesso il procedimento del gioco, partendo dalla logica di programmazione e quindi dal JavaScript.

Come prima cosa popoliamo un array con dei simboli. Nel nostro caso chiamiamo l’array arraySimboli e inseriamo 6 simboli che ho preso da questo link: https://html-css-js.com/html/character-codes/.

var arraySimboli = [
  '😣',
  '😁',
  '😴',
  '🤩',
  '🙄',
  '🤗'
];

Continuiamo la realizzazione del gioco della slot machine in JavaScript generando 3 posizioni statiche di partenza del gioco. Dunque facciamo in modo di visualizzare 3 faccine in 3 diversi div della nostra pagina.

Come mostrato nell’esempio sotto:

//situazione di partenza
document.getElementById('slot1').innerHTML = arraySimboli[0];
document.getElementById('slot2').innerHTML = arraySimboli[2];
document.getElementById('slot3').innerHTML = arraySimboli[1];

Adesso generiamo un evento al click di un pulsante e assegniamo la funzione gioca.

La funzione gioca è il cuore del programma slot machine in JavaScript. Innanzitutto disattiviamo il pulsante gioca in modo da non permettere all’utente di cliccare più volte.

Poi stabiliamo anche il numero di tentativi random da effettuare prima di mostrare le 3 facce e lo facciamo attraverso una funzione creata appositamente numeriTentativi(min,max).

Dopo, per ogni slot, generiamo dei simboli random finchè non si raggiunge il numero di tentativi utilizzando la funzione setInterval, utile per scandire il tempo tra una visualizzazione e l’altra.

Quando si raggiunge il numero di tentativi si puliscono gli slot utilizzando la funzione clearInterval.

Infine quando l’ultimo slot si è caricato si richiama la funzione vittoria.

Questa funzione vede semplicemente se il contenuto dei 3 slot è uguale. Se è vero si visualizza il messaggio ‘hai vinto’ in una porzione di codice html, altrimenti si visualizza il messaggio ‘hai perso’.

Ecco dunque tutto il codice completo del gioco sulla slot machine in JavaScript:


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

function gioca(){
 document.getElementById("button-slot").disabled = true;

  var tentativi = numeriTentativi(3,12);

  var t1 = 0;
  slot1 = setInterval(function(){
    numeroRandom = generaRandom(arraySimboli.length);
    document.getElementById("slot1").innerHTML = arraySimboli[numeroRandom];
    console.log(arraySimboli[numeroRandom]);
    t1++;
    if (t1 == tentativi) {
      clearInterval(slot1);
      return null;
    }
  }, 100);

  var t2 = 0, t3 = 0;

  slot2 = setInterval(function(){
    t2++;
    if (t2 == tentativi) {
      clearInterval(slot2);
      return null;
    }
    numeroRandom = generaRandom(arraySimboli.length);
    document.getElementById("slot2").innerHTML = arraySimboli[numeroRandom];
    console.log(arraySimboli[numeroRandom]);
  }, 100);

  slot3 = setInterval(function(){
    t3++;
    if (t3 == tentativi) {
      clearInterval(slot3);
      vittoria();
      document.getElementById("button-slot").disabled = false;
      return null;
    }
    numeroRandom = generaRandom(arraySimboli.length);
    document.getElementById("slot3").innerHTML = arraySimboli[numeroRandom];
    console.log(arraySimboli[numeroRandom]);
  }, 100);

  function vittoria() {
    var slot1 = document.getElementById("slot1").innerHTML;
    var slot2 = document.getElementById("slot2").innerHTML;
    var slot3 = document.getElementById("slot3").innerHTML;
    console.log(document.getElementById("slot1").innerHTML);
    if (slot1 == slot2 && slot2 == slot3){
      document.getElementById("risultato").innerHTML = 'HAI VINTO';
    } else {
      document.getElementById("risultato").innerHTML = 'HAI PERSO';
    }
  }
}


function generaRandom(max){
	return Math.floor((Math.random() *  max));
}

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

Ecco il codice html necessario per visualizzare il gioco:

<div id="slot-machine">
  <h2 id="titolo">Gioca alla slot machine</h2>
  <section class="slots">
  	<div id="slot1" class="icons"></div>
  	<div id="slot2" class="icons"></div>
  	<div id="slot3" class="icons"></div>
  </section>
  <button id="button-slot">Premi il pulsante e gioca!</button>
  <div id="risultato">Il tuo risultato sarà visibile qui!</div>
</div>

Infine ecco lo stile dato alla pagina html che potete personalizzare a piacere:

#slot-machine{
	border-radius: 5px;
	background-color: #3889c4;
	margin-top: 30px;
	padding: 20px;
	width: 500px;
	margin: auto;
	text-align: center;
}
h2#titolo{
	color: white;
	font-size: 26px;
	text-align: center;
	padding:10px;
}

section.slots{
	display: flex;
	justify-content: space-around;
	border-radius: 15px;
	background-color: #FAFAFA;
	padding: 20px;
}

#button-slot{
	color: white;
	font-size: 26px;
	text-align: center;
	margin-top: 25px;
	padding: 20px;
	background-color: #ffc83d;
	border: 1px solid #3889c4;
	border-radius: 10px;
	cursor: pointer;
}
.icons{
	font-size: 50px;
	text-align: center;
	margin:10px;
}

#button-slot:hover{
	background-color: #16486c;
}

div#risultato{
	width: 300px;
	margin: 10px auto;
	border: 1px solid #87c6f4;
	border-radius: 15px;
	background-color: #87c6f4;
	padding: 10px;
}

In questa lezione abbiamo sviluppato una versione semplificata del gioco slot machine in JavaScript. Provate pure a creare una vostra versione personalizzata.

Lezione precedente: gioco del 15 in JavaScript

Lezione successiva: memory game in JavaScript