Spaces:
Running
Running
File size: 3,960 Bytes
75ed8b4 2f9699b 22654b1 2f9699b 22654b1 2f9699b 22654b1 2f9699b 202b616 2f9699b 7d628b5 22654b1 2f9699b 22654b1 2f9699b 22654b1 7d628b5 22654b1 a05eb3e 22654b1 7d628b5 22654b1 2f9699b 22654b1 2f9699b 22654b1 024ed5f 22654b1 16b4e0f 22654b1 2f9699b 202b616 22654b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Slot Machine</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#slot-machine {
display: inline-block;
border: 3px solid #ccc;
padding: 20px;
border-radius: 10px;
}
.line {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.slot {
padding: 0 10px;
font-size: 2rem;
}
button {
font-size: 1rem;
padding: 10px 20px;
margin-top: 20px;
}
#balance {
font-size: 1.25rem;
margin-top: 10px;
}
#history {
font-size: 1rem;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Emoji Slot Machine</h1>
<div class="line">
<div class="slot" id="slot1-1">🍎</div>
<div class="slot" id="slot1-2">🍌</div>
<div class="slot" id="slot1-3">🍒</div>
<div class="slot" id="slot1-4">🍇</div>
<div class="slot" id="slot1-5">🍉</div>
</div>
<div class="line">
<div class="slot" id="slot2-1">🍍</div>
<div class="slot" id="slot2-2">🍓</div>
<div class="slot" id="slot2-3">🥑</div>
<div class="slot" id="slot2-4">🌽</div>
<div class="slot" id="slot2-5">🍔</div>
</div>
<div class="line">
<div class="slot" id="slot3-1">🍟</div>
<div class="slot" id="slot3-2">🍕</div>
<div class="slot" id="slot3-3">🍩</div>
<div class="slot" id="slot3-4">🍪</div>
<div class="slot" id="slot3-5">🌮</div>
</div>
<div class="line">
<div class="slot" id="slot4-1">🍣</div>
<div class="slot" id="slot4-2">🍦</div>
<div class="slot" id="slot4-3">🥗</div>
<div class="slot" id="slot4-4">🥪</div>
<div class="slot" id="slot4-5">🍱</div>
</div>
<button id="spin-btn">Spin</button>
<div id="balance">Balance: $<span id="balance-amount">10.00</span></div>
<div id="history"></div>
<script>
function countMatches(line) {
const counts = {};
for (const emoji of line) {
counts[emoji] = (counts[emoji] || 0) + 1;
}
return Math.max(...Object.values(counts));
}
document.getElementById('spin-btn').addEventListener('click', function () {
var emojis = ['🍎', '🍌', '🍒', '🍇', '🍉', '🍍', '🍓', '🥑', '🌽', '🍔'];
var balanceAmount = document.getElementById('balance-amount');
var history = document.getElementById('history');
var winAmount = 0;
// Deduct 25 cents
var newBalance = parseFloat(balanceAmount.textContent) - 0.25;
if (newBalance < 0) {
alert("Insufficient balance.");
return;
}
balanceAmount.textContent = newBalance.toFixed(2);
for (let row = 1; row <= 4; row++) {
const line = [];
for (let col = 1; col <= 5; col++) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
line.push(emoji);
document.getElementById(`slot${row}-${col}`).textContent = emoji;
}
const matches = countMatches(line);
if (matches === 3) {
winAmount += .25;
} else if (matches === 4) {
winAmount += 5;
} else if (matches === 5) {
winAmount += 20;
}
}
if (winAmount > 0) {
newBalance = parseFloat(balanceAmount.textContent) + winAmount;
balanceAmount.textContent = newBalance.toFixed(2);
history.innerHTML += '<p>You won $' + winAmount + '! 🎉</p>';
}
});
</script>
</body>
</html>
|