If so, you'll love this slot machine game created with HTML, CSS, and JavaScript. It's a great way to entertain yourself and maybe even win some virtual money!
The HTML code creates a container that houses the different elements of the game. The container has a title, three slots, statistics, and buttons to control the game. The CSS styling makes the game visually appealing by creating a background gradient with colorful buttons and text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slot Machine Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="title">
<h1>Slot Machine Game</h1>
</div>
<div class="slots">
<div class="slot">
<span class="emoji">🍒</span>
</div>
<div class="slot">
<span class="emoji">🍇</span>
</div>
<div class="slot">
<span class="emoji">🍊</span>
</div>
</div>
<div class="stats">
<div id="balance">Balance: $10</div>
<div id="win-loss">Win/Loss: $0</div>
</div>
<div class="btns">
<button class="big-button" onclick="spin()">Spin</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
In the HTML code above, we have a container div that contains four other divs: title, slots, stats, and btns. The title div contains a simple h1 tag that displays the title of the game, while the slots div contains three divs with the class slot. Each of these divs contains a single emoji, which will be the images that spin when the player hits the Spin button. The stats div contains two divs with the IDs balance and win-loss, which will display the player's current balance and their win or loss from the previous spin. Finally, the btns div contains a single button with the class big-button and an onclick event that will call the spin() function when clicked.
The JavaScript code is the most important part of the game because it controls the slots and calculates the winnings. When the user clicks the "spin" button, the slots start spinning randomly. After a few seconds, the slots stop spinning, and the game calculates the winnings based on the combination of emojis that appears on the slots.
The slot machine has three slots, each containing an emoji. The emojis are generated using CSS and are housed within a circle. The slots are created using inline-flex to display the emojis in a row.
.slot {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin: 20px;
border: 5px solid #333;
border-radius: 50%;
background-color: #eee;
}
.emoji {
font-size: 50px;
color: #333;
}
#balance, #win-loss {
margin: 10px 0;
font-size: 18px;
}
body {
background: rgb(63,94,251);
background: linear-gradient(90deg, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%);
}
/*buttons*/
:root {
--backgroundColor: rgba(246, 241, 209);
--colorShadeA: rgb(106, 163, 137);
--colorShadeB: rgb(121, 186, 156);
--colorShadeC: rgb(150, 232, 195);
--colorShadeD: rgb(187, 232, 211);
--colorShadeE: rgb(205, 255, 232);
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "OpenSans", sans-serif;
font-size: 1rem;
line-height: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
color: var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
}
button.big-button {
padding: 1em 2em;
border: 2px solid var(--colorShadeA);
border-radius: 1em;
background: var(--colorShadeE);
transform-style: preserve-3d;
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--colorShadeC);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
transform: translate3d(0, 0.75em, -1em);
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button:hover {
background: var(--colorShadeD);
transform: translate(0, 0.375em);
}
button.big-button:hover::before {
transform: translate3d(0, 0.75em, -1em);
}
button.big-button:active {
transform: translate(0em, 0.75em);
}
button.big-button:active::before {
transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}
/* flexboxes */
.container { /*display: grid;*/
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". title ."
". slots ."
". stats ."
". btns ."
;
}
.slots { grid-area: slots;
display: inline-flex;
}
.stats { grid-area: stats; }
.btns { grid-area: btns; }
.title {grid-area: title;}
/* coloful text h1 */
#text1 h1 {
display: inline-block;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff4e18, 0 0 30px #ffd118, 0 0 40px #ff9f18, 0 0 55px #49FF18, 0 0 75px #49FF18;
font-size: 50px;
font-family: sans-serif;
letter-spacing: 10px;
animation: glow 1s ease-in-out infinite alternate;
text-align: center;
}
@keyframes glow {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #c518ff, 0 0 30px #ff18ff, 0 0 40px #d818ff, 0 0 55px #49FF18, 0 0 75px #49FF18;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000;
}
}
/* crazy border */
.shadow {
/* display: grid; */
place-items: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 6rem;
font-weight: 800;
position: relative;
margin: 200px auto 0;
width: 70%;
/* height: 350px; */
background: #15202B;
}
.shadow::before,
.shadow::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
background: linear-gradient(45deg,red,blue,green,yellow,#e11d74,black,#ffff00,#aa0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 25s linear infinite;
}
.shadow::after {
filter: blur(25px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
#slot-machine {
display: flex;
flex-direction: column;
align-items: center;
}
@media only screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#slot-machine {
display: flex;
flex-direction: column;
align-items: center;
-moz-transform: scale(0.8);
zoom: 80%;
}
#text1 h1 {
-moz-transform: scale(0.8);
zoom: 80%;
}
}The game also features a balance display, which shows the user's available funds, and a win/loss display, which shows the user's winnings or losses on each spin. The balance and win/loss displays are created using HTML and styled with CSS.
