Spaces:
Running
Running
| <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> | |