v1 of Blackjack game

codu-code · Aug 3, 2024 · e894fec · e894fec
commit e894fec
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 0 deletions.
diff --git a/deck.js 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
@@ -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
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Blackjack Game</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Blackjack Game</h1>
+    <div id="game">
+      <div id="player-hand" class="hand">
+        <h2>Player's Hand</h2>
+        <div id="player-cards"></div>
+        <p id="player-score"></p>
+      </div>
+      <div id="dealer-hand" class="hand">
+        <h2>Dealer's Hand</h2>
+        <div id="dealer-cards"></div>
+        <p id="dealer-score"></p>
+      </div>
+      <button id="hit-button">Hit</button>
+      <button id="stand-button">Stand</button>
+      <button id="new-game-button">New Game</button>
+      <p id="result"></p>
+    </div>
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js 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
@@ -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;
+  }
+