File size: 4,289 Bytes
9400106 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 2a82fa9 df48b53 728cd38 df48b53 2a82fa9 df48b53 |
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 136 137 138 |
<!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 id="slot-machine">
<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>
</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 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>
|