Added game

Games/Black_jackk/README.md

@@ -0,0 +1,72 @@
+# **Black_jackk** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+- Blackjack, also known as 21, is one of the most popular casino card games in the world. It is a comparing card game between one or more players and a dealer, where players compete against the dealer but not against each other. The game is typically played with one to eight decks of 52 cards.
+
+Objective
+The main objective of Blackjack is to beat the dealer's hand without exceeding a total of 21. Players aim to get as close to 21 as possible.
+
+Card Values
+Number Cards (2-10): Face value
+Face Cards (J, Q, K): 10 points each
+Ace (A): 1 or 11 points, depending on which value benefits the hand more
+Basic Rules
+Initial Deal: Each player is dealt two cards, face-up. The dealer receives one card face-up and one card face-down (the hole card).
+
+Player's Turn: Starting from the player's left, each player has a turn to act. Players have the following options:
+
+Hit: Take another card from the dealer. A player can hit as many times as they want, as long as they don't exceed 21.
+
+Stand: Keep their current hand and end their turn.
+
+Double Down: Double the initial bet and receive exactly one more card.
+
+Split: If the first two cards are a pair, the player can split them into two separate hands, each with its own bet. The player then plays out both hands separately.
+
+Surrender: Some variations allow players to forfeit half their bet and end their hand immediately.
+
+Dealer's Turn: After all players have finished their actions, the dealer reveals the hole card. The dealer must hit 
+until their total is 17 or higher. Most casinos require the dealer to stand on all 17s, though some variations require the dealer to hit on a "soft" 17 (a hand containing an Ace valued as 11).
+
+Winning: Players win if their hand is closer to 21 than the dealer's hand or if the dealer busts (exceeds 21). If a player exceeds 21, they bust and lose their bet. If the player and dealer have the same total (a push), the player's bet is returned.
+
+
+
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+
+Blackjack is a straightforward game to learn but requires strategy to master. Here’s a step-by-step guide on how to play:
+
+1. Setting Up
+Players and Dealer: The game is played with one or more players against a dealer.
+Decks: Usually played with one to eight standard decks of 52 cards.
+
+2. Placing Bets
+Initial Bet: Each player places a bet in the designated betting area before any cards are dealt.
+
+3. Dealing Cards
+Initial Deal: Each player and the dealer are dealt two cards. Players' cards are typically dealt face-up, while the dealer has one card face-up and one card face-down (the hole card).
+
+4. Player's Turn
+Objective: Try to get as close to 21 as possible without exceeding it.
+
+
+5. Dealer's Turn
+Revealing the Hole Card: After all players have finished their actions, the dealer reveals their hole card.
+Dealer's Play: The dealer must hit until their total is at least 17. In some variations, the dealer must hit on a "soft" 17 (a hand including an Ace valued as 11).
+- 
+
+
+
+## **Screenshots 📸**
+
+![alt text](<Screenshot 2024-05-21 165650.png>)
+
+
+

Games/Black_jackk/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/Black_jackk/blackjack.js

@@ -0,0 +1,147 @@
+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/Black_jackk/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>