Added new Game : BlackJack

Games/BlackJack/README.md

@@ -0,0 +1,41 @@
+
+
+Welcome to the Blackjack Game! This is a command-line based implementation of the classic casino game Blackjack, also known as 21. The objective of the game is to beat the dealer by having a hand value closer to 21 without exceeding it.
+
+
+## Screenshot
+![alt text](<Screenshot 2024-05-21 165650.png>)
+
+Rules:
+Card Values: Number cards (2-10) are worth their face value, face cards (Jack, Queen, King) are worth 10, and Aces can be worth 1 or 11.
+
+Objective: Beat the dealer by having a hand value closer to 21 without exceeding 21.
+
+Gameplay:
+Both the player and the dealer are dealt two cards initially.
+
+The player’s cards are both face up, while the dealer has one card face up and one card face down.
+
+The player can choose to "Hit" (take another card) or "Stand" (end their turn).
+
+If the player’s hand exceeds 21, they "bust" and lose the game.
+
+After the player stands, the dealer reveals their face-down card and hits until their hand is 17 or higher.
+
+If the dealer busts, the player wins. If neither busts, the hand closer to 21 wins.
+
+
+Gameplay:
+Starting the Game:
+
+Run the game script.
+The initial hand is dealt, and the current hand values are displayed.
+Player's Turn:
+
+Choose to "Hit" to take another card or "Stand" to end your turn.
+Dealer's Turn:
+
+The dealer reveals their hidden card and draws until their hand value is 17 or higher.
+Outcome:
+
+The result of the game is displayed (Win, Lose, or Draw), and you are prompted to play again.

Games/BlackJack/blackjack.css

@@ -0,0 +1,28 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+#dealer-cards img {
+    height: 175px;
+    width: 125px;
+    margin: 1px;
+}
+
+#your-cards img {
+    height: 175px;
+    width: 125px;
+    margin: 1px;
+}
+
+#hit {
+    width: 100px;
+    height: 50px;
+    font-size: 20px;
+}
+
+#stay {
+    width: 100px;
+    height: 50px;
+    font-size: 20px;
+}

Games/BlackJack/blackjack.js

@@ -0,0 +1,148 @@
+
+let dealerSum = 0;
+let yourSum = 0;
+
+let dealerAceCount = 0;
+let yourAceCount = 0; 
+
+let hidden;
+let deck;
+
+let canHit = true; //allows the player (you) to draw while yourSum <= 21
+
+window.onload = function() {
+    buildDeck();
+    shuffleDeck();
+    startGame();
+}
+
+function buildDeck() {
+    let values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
+    let types = ["C", "D", "H", "S"];
+    deck = [];
+
+    for (let i = 0; i < types.length; i++) {
+        for (let j = 0; j < values.length; j++) {
+            deck.push(values[j] + "-" + types[i]); //A-C -> K-C, A-D -> K-D
+        }
+    }
+    // console.log(deck);
+}
+
+function shuffleDeck() {
+    for (let i = 0; i < deck.length; i++) {
+        let j = Math.floor(Math.random() * deck.length); // (0-1) * 52 => (0-51.9999)
+        let temp = deck[i];
+        deck[i] = deck[j];
+        deck[j] = temp;
+    }
+    console.log(deck);
+}
+
+function startGame() {
+    hidden = deck.pop();
+    dealerSum += getValue(hidden);
+    dealerAceCount += checkAce(hidden);
+    // console.log(hidden);
+    // console.log(dealerSum);
+    while (dealerSum < 17) {
+        //<img src="./cards/4-C.png">
+        let cardImg = document.createElement("img");
+        let card = deck.pop();
+        cardImg.src = "./cards/" + card + ".png";
+        dealerSum += getValue(card);
+        dealerAceCount += checkAce(card);
+        document.getElementById("dealer-cards").append(cardImg);
+    }
+    console.log(dealerSum);
+
+    for (let i = 0; i < 2; i++) {
+        let cardImg = document.createElement("img");
+        let card = deck.pop();
+        cardImg.src = "./cards/" + card + ".png";
+        yourSum += getValue(card);
+        yourAceCount += checkAce(card);
+        document.getElementById("your-cards").append(cardImg);
+    }
+
+    console.log(yourSum);
+    document.getElementById("hit").addEventListener("click", hit);
+    document.getElementById("stay").addEventListener("click", stay);
+
+}
+
+function hit() {
+    if (!canHit) {
+        return;
+    }
+
+    let cardImg = document.createElement("img");
+    let card = deck.pop();
+    cardImg.src = "./cards/" + card + ".png";
+    yourSum += getValue(card);
+    yourAceCount += checkAce(card);
+    document.getElementById("your-cards").append(cardImg);
+
+    if (reduceAce(yourSum, yourAceCount) > 21) { //A, J, 8 -> 1 + 10 + 8
+        canHit = false;
+    }
+
+}
+
+function stay() {
+    dealerSum = reduceAce(dealerSum, dealerAceCount);
+    yourSum = reduceAce(yourSum, yourAceCount);
+
+    canHit = false;
+    document.getElementById("hidden").src = "./cards/" + hidden + ".png";
+
+    let message = "";
+    if (yourSum > 21) {
+        message = "You Lose!";
+    }
+    else if (dealerSum > 21) {
+        message = "You win!";
+    }
+    //both you and dealer <= 21
+    else if (yourSum == dealerSum) {
+        message = "Tie!";
+    }
+    else if (yourSum > dealerSum) {
+        message = "You Win!";
+    }
+    else if (yourSum < dealerSum) {
+        message = "You Lose!";
+    }
+
+    document.getElementById("dealer-sum").innerText = dealerSum;
+    document.getElementById("your-sum").innerText = yourSum;
+    document.getElementById("results").innerText = message;
+}
+
+function getValue(card) {
+    let data = card.split("-"); // "4-C" -> ["4", "C"]
+    let value = data[0];
+
+    if (isNaN(value)) { //A J Q K
+        if (value == "A") {
+            return 11;
+        }
+        return 10;
+    }
+    return parseInt(value);
+}
+
+function checkAce(card) {
+    if (card[0] == "A") {
+        return 1;
+    }
+    return 0;
+}
+
+function reduceAce(playerSum, playerAceCount) {
+    while (playerSum > 21 && playerAceCount > 0) {
+        playerSum -= 10;
+        playerAceCount -= 1;
+    }
+    return playerSum;
+}

Games/BlackJack/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Black Jack</title>
+        <link rel="stylesheet" href="blackjack.css">
+        <script src="blackjack.js"></script>
+    </head>
+
+    <body>
+        <h2>Dealer: <span id="dealer-sum"></span></h2>
+        <div id="dealer-cards">
+            <img id="hidden" src="./cards/BACK.png">
+        </div>
+
+        <h2>You: <span id="your-sum"></span></h2>
+        <div id="your-cards"></div>
+
+        <br>
+        <button id="hit">Hit</button>
+        <button id="stay">Stay</button>
+        <p id="results"></p>
+    </body>
+</html>

assets/index_old.html

@@ -2707,6 +2707,27 @@ <h3 class="project-title"><a href="../Games/DoraemonRun/index.html"
           </a>
         </li>
 
+        <li class="project-item  active" data-filter-item data-category="open source">
+          <a href="../Games/BlackJack/index.html">
+
+            <figure class="project-img">
+              <div class="project-item-icon-box">
+                <img id="joystick"
+                  src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Video%20Game.png"
+                  alt="Eye" width="3" />
+              </div>
+
+              <img src="../Games/BlackJack/cards/blackjack.jpg" alt="BlackJack" loading="lazy">
+            </figure>
+
+            <h3 class="project-title"><a href="../Games/BlackJack/index.html"
+                target="_blank">141. BlackJack </a> </h3>
+
+            <p class="project-category">BlackJack</p>
+
+          </a>
+        </li>
+
 
       </ul>