<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8" />
<title>Simple
Slot Machine</title>
<style>
body {
font-family:
Arial, sans-serif;
background: #111;
color: #fff;
display: flex;
justify-content:
center;
align-items: center;
height: 100vh;
}
.slot-container
{
background: #222;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0 0
20px rgba(0,0,0,0.7);
text-align: center;
min-width: 320px;
}
.display
{
margin-bottom: 15px;
font-size: 14px;
display: flex;
justify-content:
space-between;
}
.reels
{
display: flex;
justify-content:
center;
gap: 10px;
margin: 15px 0;
}
.reel
{
width: 60px;
height: 60px;
border-radius: 8px;
background: #000;
display: flex;
align-items: center;
justify-content:
center;
font-size: 32px;
border: 2px
solid #555;
transition:
transform 0.2s;
}
.reel.win {
border-color: #0f0;
box-shadow: 0 0
10px #0f0;
}
.controls
{
margin-top: 10px;
}
.controls
input {
width: 60px;
text-align: right;
margin-right: 5px;
padding: 3px;
}
button {
cursor: pointer;
padding: 8px 16px;
border-radius: 6px;
border: none;
background: #ff9800;
color: #000;
font-weight: bold;
transition:
background 0.2s, transform 0.1s;
}
button:active {
transform: scale(0.97);
}
button:disabled {
background: #555;
cursor: not-allowed;
}
.message
{
margin-top: 10px;
min-height: 18px;
font-size: 14px;
}
</style>
</head>
<body>
<div
class="slot-container">
<div
class="display">
<div>Balance: $<span
id="balance">100</span></div>
<div>Last
win: $<span id="lastWin">0</span></div>
</div>
<div
class="reels">
<div
class="reel" id="reel1">❔</div>
<div
class="reel" id="reel2">❔</div>
<div
class="reel" id="reel3">❔</div>
</div>
<div
class="controls">
Bet: $
<input
type="number" id="bet" value="5"
min="1" />
<button
id="spinBtn">Spin</button>
</div>
<div
class="message" id="message"></div>
</div>
<script>
const symbols =
["🍒", "🍋", "⭐",
"🔔", "7️⃣"];
const balanceEl = document.getElementById("balance");
const lastWinEl = document.getElementById("lastWin");
const messageEl = document.getElementById("message");
const spinBtn = document.getElementById("spinBtn");
const betInput = document.getElementById("bet");
const reels = [
document.getElementById("reel1"),
document.getElementById("reel2"),
document.getElementById("reel3")
];
let balance = 100;
function getRandomSymbol()
{
const index = Math.floor(Math.random() * symbols.length);
return
symbols[index];
}
function clearWinHighlight() {
reels.forEach(r => r.classList.remove("win"));
}
function spinReels()
{
clearWinHighlight();
spinBtn.disabled = true;
messageEl.textContent
= "Spinning...";
const bet = Number(betInput.value);
if (isNaN(bet) || bet <= 0) {
messageEl.textContent = "Enter a valid bet amount.";
spinBtn.disabled = false;
return;
}
if (bet > balance) {
messageEl.textContent = "Not enough balance.";
spinBtn.disabled = false;
return;
}
balance -= bet;
balanceEl.textContent = balance.toFixed(2);
// fake spinning
animation with a few quick updates
let spins = 10;
const spinInterval = setInterval(() => {
reels.forEach(r => {
r.textContent = getRandomSymbol();
r.style.transform = `translateY(${Math.random() * 10 - 5}px)`;
});
spins--;
if (spins
<= 0) {
clearInterval(spinInterval);
// final result
reels.forEach(r => {
r.textContent = getRandomSymbol();
r.style.transform = "translateY(0)";
});
evaluateResult(bet);
spinBtn.disabled = false;
}
}, 80);
}
function evaluateResult(bet) {
const s1 = reels[0].textContent;
const s2 = reels[1].textContent;
const s3 = reels[2].textContent;
let win = 0;
// simple payout
logic:
// 3 of a kind:
5x bet (10x if 7️⃣)
// 2 of a kind:
2x bet
if (s1 === s2
&& s2 === s3) {
if (s1 ===
"7️⃣") {
win = bet * 10;
messageEl.textContent = "JACKPOT! 3 sevens!";
} else {
win = bet * 5;
messageEl.textContent = "Big win! 3 of a kind!";
}
reels.forEach(r => r.classList.add("win"));
} else if (s1
=== s2 || s2 === s3 || s1 === s3) {
win = bet * 2;
messageEl.textContent = "Nice! 2 of a kind.";
const counts =
{};
reels.forEach(r => {
counts[r.textContent] = (counts[r.textContent] || 0) + 1;
});
const winningSymbol = Object.keys(counts).find(k => counts[k] >= 2);
reels.forEach(r => {
if (r.textContent === winningSymbol) r.classList.add("win");
});
} else {
messageEl.textContent = "No win. Try again!";
}
if (win > 0) {
balance += win;
balanceEl.textContent = balance.toFixed(2);
}
lastWinEl.textContent = win.toFixed(2);
}
spinBtn.addEventListener("click", spinReels);
</script>
</body>
</html>