JavaScript Slot Machine, code game slot machine JS

In this tutorial I propose a simple version of the JavaScript Slot Machine.

The game consists of clicking on a button and trying to win, bringing out 3 identical symbols, in our example they are smileys.

Only if all 3 symbols are the same is there a victory situation, otherwise you lose.

So here’s a demo of the JavaScript Slot Machine:

Slot Machine Game

Your result will be visible here!

JavaScript Slot Machine – development

Let’s now explain the procedure of the game, starting from the programming logic and then from the JavaScript.

First we populate an array with symbols. In our case we call the array array Symbols and insert 6 symbols that I took from this link: https://html-css-js.com/html/character-codes/.

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

We continue the realization of the slot machine game in JavaScript by generating 3 static starting positions of the game. So let’s make sure to display 3 smileys in 3 different divs of our page.

As shown in the example below:

//Starting situation
document.getElementById('slot1').innerHTML = arraySimboli[0];
document.getElementById('slot2').innerHTML = arraySimboli[2];
document.getElementById('slot3').innerHTML = arraySimboli[1];

Now let’s generate an event on the click of a button and assign the play function.

The play function is the heart of the JavaScript slot machine program. First of all, we deactivate the play button so as not to allow the user to click several times.

Then we also establish the number of random attempts to be made before showing the 3 faces and we do it through a function created specifically for numbers (min, max).

Then, for each slot, we generate random symbols until the number of attempts is reached using the setInterval function, useful for marking the time between one display and another.

When the retry count is reached, the slots are cleared using the clearInterval function.

Finally, when the last slot has loaded, the win function is called up.

This function simply sees if the contents of the 3 slots are the same. If it is true, the ‘you won’ message is displayed in a portion of the html code, otherwise the ‘you lost’ message is displayed.

So here is all the complete code of the game on the slot machine in JavaScript:


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

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

  const attempts = numberAttempts(3,12);

  let t1 = 0, t2 = 0, t3 = 0;

  let slot1 = setInterval(function(){
    numberRandom = generaRandom(arraySimbols.length);
    document.getElementById("slot1").innerHTML = arraySimbols[numberRandom ];
    console.log(arraySimbols[numberRandom ]);
    t1++;
    if (t1 == attempts) {
      clearInterval(slot1);
      return null;
    }
  }, 100);

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

  let slot3 = setInterval(function(){
    t3++;
    if (t3 == attempts) {
      clearInterval(slot3);
      victory();
      document.getElementById("button-slot").disabled = false;
      return null;
    }
    numberRandom = generaRandom(arraySimbols.length);
    document.getElementById("slot3").innerHTML = arraySimbols[numberRandom ];
    console.log(arraySimbols[numberRandom ]);
  }, 100);

  function victory() {
    slot1 = document.getElementById("slot1").innerHTML;
    slot2 = document.getElementById("slot2").innerHTML;
    slot3 = document.getElementById("slot3").innerHTML;

    if (slot1 == slot2 && slot2 == slot3){
      document.getElementById("result").innerHTML = 'YOU WON';
    } else {
      document.getElementById("result").innerHTML = 'YOU LOST';
    }
  }
}


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

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

Here is the html code needed to view the game:

Finally, here is the style given to the html page that you can customize as you wish:


#slot-machine{
	border-radius: 5px;
	background-color: #3889c4;
	margin-top: 30px;
	padding: 20px;
	width: 500px;
	margin: auto;
	text-align: center;
}
h2#title{
	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#result{
	width: 300px;
	margin: 10px auto;
	border: 1px solid #87c6f4;
	border-radius: 15px;
	background-color: #87c6f4;
	padding: 10px;
}