Casino Card Bet

Casino Card Bet Game

Balance: $100

Your Cards

Dealer Cards

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #0a1128; /* Dark blue background */ color: #ffffff; /* White text */ display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; } .container { background-color: #1e2749; /* Slightly lighter blue container */ padding: 40px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow */ text-align: center; } h1 { margin-top: 0; color: #69b3e4; /* Neon blue/cyan for title */ font-size: 2.5em; text-shadow: 0 0 10px rgba(105, 179, 228, 0.8); /* Neon glow */ } .balance { font-size: 1.4em; margin-bottom: 30px; color: #c0d6df; /* Light grey-blue for balance */ } .bet-controls { margin-bottom: 30px; display: flex; justify-content: center; gap: 15px; align-items: center; } #betAmount { padding: 12px 15px; border-radius: 8px; border: 2px solid #293256; /* Darker blue border */ background-color: #293256; /* Darker input background */ color: #ffffff; width: 120px; font-size: 1em; text-align: center; } #betAmount::placeholder { color: #778da9; /* Placeholder color */ } #dealButton { padding: 12px 25px; border-radius: 8px; border: none; background-color: #a3cef1; /* Light blue button */ color: #0a1128; /* Dark text for contrast */ cursor: pointer; font-weight: bold; font-size: 1.1em; transition: background-color 0.3s ease; /* Smooth transition */ } #dealButton:hover { background-color: #778da9; /* Slightly darker on hover */ } .game-area { display: flex; justify-content: space-around; margin-bottom: 30px; } .card-area { width: 45%; } .card-area h2 { color: #69b3e4; /* Neon blue for area titles */ font-size: 1.8em; margin-bottom: 20px; } .cards { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; } .card { width: 70px; height: 105px; background-color: #ffffff; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 1.8em; color: #0a1128; /* Dark text on cards */ box-shadow: 4px 4px 8px rgba(0,0,0,0.4); /* Deeper card shadow */ border: 1px solid #e0e0e0; /* Light border for definition */ } .hand-value { font-size: 1.2em; color: #c0d6df; /* Light grey-blue for hand value */ } .message-area { min-height: 40px; font-size: 1.2em; font-weight: bold; color: #ffdd59; /* Yellow for messages, indicating important info */ text-shadow: 0 0 5px rgba(255, 221, 89, 0.7); /* Glow for messages */ } document.addEventListener('gesturestart', function(e) { e.preventDefault(); }); document.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); let balance = 100; let betAmountInput = document.getElementById('betAmount'); let dealButton = document.getElementById('dealButton'); let playerCardsDiv = document.getElementById('playerCards'); let dealerCardsDiv = document.getElementById('dealerCards'); let playerValueDiv = document.getElementById('playerValue'); let dealerValueDiv = document.getElementById('dealerValue'); let messageArea = document.getElementById('messageArea'); let balanceDisplay = document.getElementById('balance'); balanceDisplay.innerText = `Balance: $${balance}`; let deck = []; const suits = ["C", "D", "H", "S"]; const values = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"]; function createDeck() { deck = []; for (let suit of suits) { for (let value of values) { deck.push({ suit: suit, value: value }); } } shuffleDeck(); } function shuffleDeck() { for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } } function dealCard() { if (deck.length > 0) { return deck.pop(); } return null; } function calculateHandValue(hand) { let value = 0; let hasAce = false; for (let card of hand) { if (isNaN(parseInt(card.value))) { if (card.value === 'A') { hasAce = true; value += 11; } else { value += 10; // J, Q, K are 10 } } else { value += parseInt(card.value); } } if (hasAce && value > 21) { value -= 10; // Ace can be 1 instead of 11 if busting } return value; } function displayCards(hand, targetDiv) { targetDiv.innerHTML = ''; // Clear previous cards for (let card of hand) { let cardDiv = document.createElement('div'); cardDiv.classList.add('card'); cardDiv.innerText = card.value + card.suit; targetDiv.appendChild(cardDiv); } } function updateBalanceDisplay() { balanceDisplay.innerText = `Balance: $${balance}`; } function resetGame() { playerCardsDiv.innerHTML = ''; dealerCardsDiv.innerHTML = ''; playerValueDiv.innerText = ''; dealerValueDiv.innerText = ''; messageArea.innerText = ''; createDeck(); dealButton.disabled = false; } function determineWinner(playerHand, dealerHand) { let playerValue = calculateHandValue(playerHand); let dealerValue = calculateHandValue(dealerHand); playerValueDiv.innerText = `Value: ${playerValue}`; dealerValueDiv.innerText = `Value: ${dealerValue}`; if (playerValue > 21) { messageArea.innerText = 'You busted! Dealer wins.'; balance -= currentBet; } else if (dealerValue > 21) { messageArea.innerText = 'Dealer busted! You win!'; balance += currentBet; } else if (playerValue > dealerValue) { messageArea.innerText = 'You win!'; balance += currentBet; } else if (dealerValue > playerValue) { messageArea.innerText = 'Dealer wins!'; balance -= currentBet; } else { messageArea.innerText = 'Push! It\'s a tie.'; } updateBalanceDisplay(); dealButton.disabled = true; // Disable deal button until next reset (manual in this basic version) } let currentBet = 0; dealButton.addEventListener('click', () => { resetGame(); currentBet = parseInt(betAmountInput.value); if (isNaN(currentBet) || currentBet <= 0) { messageArea.innerText = 'Invalid bet amount.'; return; } if (currentBet > balance) { messageArea.innerText = 'Insufficient balance.'; return; } let playerHand = []; let dealerHand = []; playerHand.push(dealCard()); dealerHand.push(dealCard()); playerHand.push(dealCard()); dealerHand.push(dealCard()); displayCards(playerHand, playerCardsDiv); displayCards(dealerHand, dealerCardsDiv); determineWinner(playerHand, dealerHand); }); createDeck(); // Initialize deck on page load