diff --git a/deck.js b/deck.js new file mode 100644 index 0000000..bd0cd0c --- /dev/null +++ b/deck.js @@ -0,0 +1,15 @@ +// deck.js + +const apiUrl = "https://deckofcardsapi.com/api/deck"; + +export async function createDeck() { + const response = await fetch(`${apiUrl}/new/shuffle/?deck_count=1`); + const data = await response.json(); + return data.deck_id; +} + +export async function drawCards(deckId, count) { + const response = await fetch(`${apiUrl}/${deckId}/draw/?count=${count}`); + const data = await response.json(); + return data.cards; +} diff --git a/game.js b/game.js new file mode 100644 index 0000000..a4c56a1 --- /dev/null +++ b/game.js @@ -0,0 +1,107 @@ +// game.js + +import { createDeck, drawCards } from "./deck.js"; + +let deckId; +let playerHand = []; +let dealerHand = []; +let playerScore = 0; +let dealerScore = 0; +let gameOver = false; + +export async function startNewGame() { + deckId = await createDeck(); + playerHand = await drawCards(deckId, 2); + dealerHand = await drawCards(deckId, 2); + gameOver = false; + updateScores(); + updateUI(); + document.getElementById("result").innerText = ""; +} + +export async function hit() { + if (!gameOver) { + const newCard = await drawCards(deckId, 1); + playerHand.push(newCard[0]); + updateScores(); + updateUI(); + checkForBust(); + } +} + +export async function stand() { + if (!gameOver) { + gameOver = true; + while (dealerScore < 17) { + const newCard = await drawCards(deckId, 1); + dealerHand.push(newCard[0]); + updateScores(); + updateUI(); + if (dealerScore >= 17) { + checkForWinner(); + } + } + } +} + +function updateScores() { + playerScore = calculateScore(playerHand); + dealerScore = calculateScore(dealerHand); + document.getElementById("player-score").innerText = `Score: ${playerScore}`; + document.getElementById("dealer-score").innerText = `Score: ${dealerScore}`; +} + +function calculateScore(hand) { + let score = 0; + let hasAce = false; + hand.forEach((card) => { + if (card.value === "ACE") { + hasAce = true; + score += 11; + } else if (["KING", "QUEEN", "JACK"].includes(card.value)) { + score += 10; + } else { + score += parseInt(card.value); + } + }); + if (score > 21 && hasAce) { + score -= 10; + } + return score; +} + +function updateUI() { + const playerCardsDiv = document.getElementById("player-cards"); + const dealerCardsDiv = document.getElementById("dealer-cards"); + playerCardsDiv.innerHTML = ""; + dealerCardsDiv.innerHTML = ""; + + playerHand.forEach((card) => { + const img = document.createElement("img"); + img.src = card.image; + playerCardsDiv.appendChild(img); + }); + + dealerHand.forEach((card) => { + const img = document.createElement("img"); + img.src = card.image; + dealerCardsDiv.appendChild(img); + }); +} + +function checkForBust() { + if (playerScore > 21) { + document.getElementById("result").innerText = "You bust! Dealer wins!"; + gameOver = true; + } +} + +function checkForWinner() { + if (dealerScore > 21) { + document.getElementById("result").innerText = "Dealer busts! You win!"; + } else if (dealerScore >= playerScore) { + document.getElementById("result").innerText = "Dealer wins!"; + } else { + document.getElementById("result").innerText = "You win!"; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..e54a254 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + Blackjack Game + + + +

Blackjack Game

+
+
+

Player's Hand

+
+

+
+
+

Dealer's Hand

+
+

+
+ + + +

+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d6a9ce3 --- /dev/null +++ b/script.js @@ -0,0 +1,11 @@ +// script.js + +import { startNewGame, hit, stand } from "./game.js"; + +document + .getElementById("new-game-button") + .addEventListener("click", startNewGame); +document.getElementById("hit-button").addEventListener("click", hit); +document.getElementById("stand-button").addEventListener("click", stand); + +startNewGame(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..90cba93 --- /dev/null +++ b/styles.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #2e7d32; + color: white; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + } + + h1 { + margin-top: 20px; + } + + #game { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 600px; + } + + .hand { + margin: 20px; + border: 2px solid white; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 300px; + } + + .cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .cards img { + margin: 5px; + } + + #controls { + position: fixed; + bottom: 20px; + width: 100%; + display: flex; + justify-content: center; + gap: 10px; + } + + button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #388e3c; + color: white; + transition: background-color 0.3s; + } + + button:hover { + background-color: #1b5e20; + } + + button:disabled { + background-color: #9e9e9e; + } + + #result { + font-size: 20px; + margin-top: 20px; + } + \ No newline at end of file