Casino Card Bet

Balance: $1000

.casino-container { background: linear-gradient(45deg, #1a1a1a, #2a0a0a); color: #ffd700; min-height: 100vh; padding: 20px; font-family: 'Arial', sans-serif; } .balance-box { background: #000; padding: 15px; border: 2px solid #ffd700; border-radius: 10px; margin-bottom: 20px; text-align: center; } .bet-controls { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; } input#betAmount { padding: 10px; border: 2px solid #ffd700; border-radius: 5px; background: #222; color: #fff; font-size: 16px; } button { padding: 10px 20px; background: #b22222; border: none; border-radius: 5px; color: white; cursor: pointer; transition: all 0.3s; } button:hover { background: #ff0000; transform: scale(1.05); } .game-area { display: flex; flex-direction: column; gap: 30px; margin: 20px 0; } .dealer-cards, .player-cards { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } .card { width: 120px; height: 180px; background: #fff; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: transform 0.3s; } .card::before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 2px solid #333; border-radius: 8px; } .card.red { color: #ff4444; } .card.black { color: #333; } .status-message { text-align: center; font-size: 24px; min-height: 30px; margin-top: 20px; } .card-back { background: repeating-linear-gradient( 45deg, #b22222, #b22222 10px, #8b0000 10px, #8b0000 20px ); color: transparent; } class Deck { constructor() { this.cards = []; const suits = ['♥', '♦', '♣', '♠']; const values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A']; suits.forEach(suit => { values.forEach(value => { this.cards.push({ suit, value }); }); }); this.shuffle(); } shuffle() { for (let i = this.cards.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; } } drawCard() { return this.cards.pop(); } } class Game { constructor() { this.balance = localStorage.getItem('casinoBalance') || 1000; this.currentBet = 0; this.deck = null; this.dealerCards = []; this.playerCards = []; this.updateBalanceDisplay(); document.getElementById('placeBet').addEventListener('click', () => this.placeBet()); } updateBalanceDisplay() { document.getElementById('balance').textContent = this.balance; localStorage.setItem('casinoBalance', this.balance); } placeBet() { const betInput = document.getElementById('betAmount'); const betAmount = parseInt(betInput.value); if (betAmount > this.balance) { this.showMessage('Not enough balance!'); return; } if (betAmount < 1) { this.showMessage('Minimum bet is $1'); return; } this.currentBet = betAmount; this.balance -= betAmount; this.updateBalanceDisplay(); this.startGame(); } startGame() { this.deck = new Deck(); this.dealerCards = [this.deck.drawCard()]; this.playerCards = [this.deck.drawCard(), this.deck.drawCard()]; this.displayCards(); setTimeout(() => this.dealerTurn(), 1000); } dealerTurn() { this.dealerCards.push(this.deck.drawCard()); this.displayCards(); this.determineWinner(); } calculateTotal(cards) { let total = 0; let aces = 0; cards.forEach(card => { if (['J', 'Q', 'K'].includes(card.value)) total += 10; else if (card.value === 'A') { total += 11; aces++; } else total += parseInt(card.value); }); while (total > 21 && aces > 0) { total -= 10; aces--; } return total; } determineWinner() { const playerTotal = this.calculateTotal(this.playerCards); const dealerTotal = this.calculateTotal(this.dealerCards); if (playerTotal > 21) return this.gameLost('Player busts!'); if (dealerTotal > 21) return this.gameWon('Dealer busts!'); if (playerTotal > dealerTotal) this.gameWon('Player wins!'); else if (dealerTotal > playerTotal) this.gameLost('Dealer wins!'); else this.gameTie('Push!'); } gameWon(message) { this.balance += this.currentBet * 2; this.showMessage(`${message} You win $${this.currentBet * 2}!`); this.updateBalanceDisplay(); } gameLost(message) { this.showMessage(`${message} You lose $${this.currentBet}!`); if (this.balance === 0) this.showMessage('Game Over! Refresh to restart'); } gameTie(message) { this.balance += this.currentBet; this.showMessage(`${message} Bet returned`); this.updateBalanceDisplay(); } showMessage(message) { document.querySelector('.status-message').textContent = message; } displayCards() { const dealerDiv = document.querySelector('.dealer-cards'); const playerDiv = document.querySelector('.player-cards'); dealerDiv.innerHTML = this.dealerCards.map(card => this.createCardElement(card, true)).join(''); playerDiv.innerHTML = this.playerCards.map(card => this.createCardElement(card)).join(''); } createCardElement(card, isDealer = false) { const colorClass = ['♥', '♦'].includes(card.suit) ? 'red' : 'black'; return `

${isDealer ? '?' : card.value}
${isDealer ? '' : card.suit}

`; } } // Initialize game when loaded window.addEventListener('DOMContentLoaded', () => new Game());