Creating a Javascript slot machine is both a fun project and a nice way to separate out the pieces of what can sometimes seem like a complicated program (and it can be when talking about much larger systems, progressive jackpots, etc.) but at the base is actually not too difficult.
Here's the code in it its entirety:
<!DOCTYPE html>
<html>
<head>
<style>
.slot-container {
display: flex;
flex-direction: column;
align-items: center;
}
.slot-row {
display: flex;
margin-bottom: 40px;
}
.slot {
width: 150px;
height: 150px;
border: 1px solid black;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
}
.winning-slot {
border: 12px solid red;
}
button {
font-size: 24px;
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
margin: 0 auto;
display: block;
margin-top: 20px;
}
</style>
</head>
<body onload="updateSlots()">
<div class="slot-container">
<div class="slot-row">
<div id="slot1" class="slot"></div>
<div id="slot2" class="slot"></div>
<div id="slot3" class="slot"></div>
</div>
<div class="slot-row">
<div id="slot4" class="slot"></div>
<div id="slot5" class="slot"></div>
<div id="slot6" class="slot"></div>
</div>
<div class="slot-row">
<div id="slot7" class="slot"></div>
<div id="slot8" class="slot"></div>
<div id="slot9" class="slot"></div>
</div>
</div>
<button onclick="updateSlots()">Spin</button>
<script>
// Define an array of images
var images = [
'https://via.placeholder.com/150x150/000000/FFFFFF/?text=1',
'https://via.placeholder.com/150x150/000000/FFFFFF/?text=2',
'https://via.placeholder.com/150x150/000000/FFFFFF/?text=3',
'https://via.placeholder.com/150x150/000000/FFFFFF/?text=4',
'https://via.placeholder.com/150x150/000000/FFFFFF/?text=5'
];
// Function to generate a random image
function getRandomImage() {
return images[Math.floor(Math.random() * images.length)];
}
// Function to update the images in the slots
function updateSlots() {
var slot1 = document.getElementById('slot1');
var slot2 = document.getElementById('slot2');
var slot3 = document.getElementById('slot3');
var slot4 = document.getElementById('slot4');
var slot5 = document.getElementById('slot5');
var slot6 = document.getElementById('slot6');
var slot7 = document.getElementById('slot7');
var slot8 = document.getElementById('slot8');
var slot9 = document.getElementById('slot9');
slot1.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot2.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot3.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot4.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot5.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot6.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot7.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot8.innerHTML = '<img src="' + getRandomImage() + '"/>';
slot9.innerHTML = '<img src="' + getRandomImage() + '"/>';
// Remove the "winning-slot" class from all slots
slot1.classList.remove("winning-slot");
slot2.classList.remove("winning-slot");
slot3.classList.remove("winning-slot");
slot4.classList.remove("winning-slot");
slot5.classList.remove("winning-slot");
slot6.classList.remove("winning-slot");
slot7.classList.remove("winning-slot");
slot8.classList.remove("winning-slot");
slot9.classList.remove("winning-slot");
// Check if the player has won
if (slot1.innerHTML === slot2.innerHTML && slot2.innerHTML === slot3.innerHTML) {
slot1.classList.add("winning-slot");
slot2.classList.add("winning-slot");
slot3.classList.add("winning-slot");
}
if (slot4.innerHTML === slot5.innerHTML && slot5.innerHTML === slot6.innerHTML) {
slot4.classList.add("winning-slot");
slot5.classList.add("winning-slot");
slot6.classList.add("winning-slot");
}
if (slot7.innerHTML === slot8.innerHTML && slot8.innerHTML === slot9.innerHTML) {
slot7.classList.add("winning-slot");
slot8.classList.add("winning-slot");
slot9.classList.add("winning-slot");
}
if (slot1.innerHTML === slot4.innerHTML && slot4.innerHTML === slot7.innerHTML) {
slot1.classList.add("winning-slot");
slot4.classList.add("winning-slot");
slot7.classList.add("winning-slot");
}
if (slot2.innerHTML === slot5.innerHTML && slot5.innerHTML === slot8.innerHTML) {
slot2.classList.add("winning-slot");
slot5.classList.add("winning-slot");
slot8.classList.add("winning-slot");
}
if (slot3.innerHTML === slot6.innerHTML && slot6.innerHTML === slot9.innerHTML) {
slot3.classList.add("winning-slot");
slot6.classList.add("winning-slot");
slot9.classList.add("winning-slot");
}
if (slot1.innerHTML === slot5.innerHTML && slot5.innerHTML === slot9.innerHTML) {
slot1.classList.add("winning-slot");
slot5.classList.add("winning-slot");
slot9.classList.add("winning-slot");
}
if (slot3.innerHTML === slot5.innerHTML && slot5.innerHTML === slot7.innerHTML) {
slot3.classList.add("winning-slot");
slot5.classList.add("winning-slot");
slot7.classList.add("winning-slot");
}
}
</script>
</body>
</html>
The main "box" of the slot machine--the playable area--is just standard HTML--where the innerHTML is created automatically from a set of images, with each square randomly assigned an image, and then checked to see if the innerHTML is the same when the Spin button is pressed.
In order to win across, down, and diagonal, each square needs to check for the winning combination for each set of squares. So in the example above in order to win diagonally with slot1 (or square 1) you have to check squares number 5 and 9.
While the code certainly could be updated to be more modular, using this example it's pretty easy to see how everything works and displays back to the user from a UI perspective (adding and removing styles) and can be built onto for a more customized slot machine experience.
