|
|
<!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 balanceAmount = document.getElementById('balance-amount'); |
|
|
var history = document.getElementById('history'); |
|
|
var winAmount = 0; |
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
|
