Educational Casino

Educational Casino

Balance: $1000

10

?

?

?

How to Play:

1. Adjust your bet amount

2. Click "Place Bet" to spin

3. Match 3 symbols to win!

Payouts: 3x for 3 matching symbols

body { font-family: 'Arial', sans-serif; background-color: #1a1a2e; color: white; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .casino-container { background-color: #16213e; border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); max-width: 600px; width: 100%; text-align: center; } h1 { color: #e94560; margin-bottom: 20px; } .balance-container { background-color: #0f3460; padding: 10px; border-radius: 5px; margin-bottom: 20px; } .game-container { background-color: #0f3460; padding: 20px; border-radius: 5px; margin-bottom: 20px; } .bet-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; } .bet-controls button { background-color: #e94560; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; } .bet-controls button:hover { background-color: #ff6b81; } #place-bet { background-color: #4CAF50; padding: 8px 20px; } #place-bet:hover { background-color: #66BB6A; } .game-board { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } .slot { width: 80px; height: 80px; background-color: white; color: #16213e; display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .result-message { min-height: 24px; font-weight: bold; color: #e94560; } .info-panel { background-color: #0f3460; padding: 15px; border-radius: 5px; text-align: left; } .info-panel h3 { margin-top: 0; color: #e94560; } const symbols = ['🍒', '🍋', '🍊', '🍇', '🍉', '7️⃣']; let balance = 1000; let currentBet = 10; const balanceElement = document.getElementById('balance'); const currentBetElement = document.getElementById('current-bet'); const resultMessage = document.getElementById('result-message'); const decreaseBetBtn = document.getElementById('decrease-bet'); const increaseBetBtn = document.getElementById('increase-bet'); const placeBetBtn = document.getElementById('place-bet'); const slots = [ document.getElementById('slot1'), document.getElementById('slot2'), document.getElementById('slot3') ]; function updateUI() { balanceElement.textContent = balance; currentBetElement.textContent = currentBet; } function spinSlots() { return [ symbols[Math.floor(Math.random() * symbols.length)], symbols[Math.floor(Math.random() * symbols.length)], symbols[Math.floor(Math.random() * symbols.length)] ]; } function checkWin(results) { return results[0] === results[1] && results[1] === results[2]; } function animateSlots(results) { let spins = 0; const maxSpins = 5; const interval = setInterval(() => { slots.forEach((slot, index) => { slot.textContent = symbols[Math.floor(Math.random() * symbols.length)]; }); spins++; if (spins >= maxSpins) { clearInterval(interval); slots.forEach((slot, index) => { slot.textContent = results[index]; }); if (checkWin(results)) { const winnings = currentBet * 3; balance += winnings; resultMessage.textContent = `You won $${winnings}!`; } else { resultMessage.textContent = 'Try again!'; } updateUI(); placeBetBtn.disabled = false; } }, 100); } decreaseBetBtn.addEventListener('click', () => { if (currentBet > 10) { currentBet -= 10; updateUI(); } }); increaseBetBtn.addEventListener('click', () => { if (currentBet < balance && currentBet < 100) { currentBet += 10; updateUI(); } }); placeBetBtn.addEventListener('click', () => { if (balance >= currentBet) { balance -= currentBet; updateUI(); placeBetBtn.disabled = true; resultMessage.textContent = 'Spinning...'; const results = spinSlots(); animateSlots(results); } else { resultMessage.textContent = 'Not enough balance!'; } }); updateUI();