Merge pull request #4176 from codewithganeshhh/main

Adding Taash Game
kunjgit · Jun 9, 2024 · 4573521 · 4573521
2 parents 2aa7691 + 77ee045
commit 4573521
Show file tree

Hide file tree

Showing 23 changed files with 392 additions and 1 deletion.
diff --git a/Games/Taash Game/README.md b/Games/Taash Game/README.md
@@ -0,0 +1,12 @@
+# Taash Game
+The player has to get a hand with a value as close to 21 as possible without going over. 
+A hand that goes over 21 is a bust. 
+The players in a Taash Game plays against the dealer. Each player has to beat the dealer's hand in order to win.
+
+In Taash Game, the suits have no meaning. 
+1. Number cards have a value equal to their number.
+2. All the picture cards (Jacks, Queens, and Kings) are worth 10. 
+3. Aces are worth 1.
+4. The table keeps a record of total wins,loses and draws
+5. Click on "Restart" Button to start a new game
+6. Click on "Deal" Button to clear the field
diff --git a/Games/Taash Game/images/10.png b/Games/Taash Game/images/10.png
diff --git a/Games/Taash Game/images/2.png b/Games/Taash Game/images/2.png
diff --git a/Games/Taash Game/images/3.png b/Games/Taash Game/images/3.png
diff --git a/Games/Taash Game/images/4.png b/Games/Taash Game/images/4.png
diff --git a/Games/Taash Game/images/5.png b/Games/Taash Game/images/5.png
diff --git a/Games/Taash Game/images/6.png b/Games/Taash Game/images/6.png
diff --git a/Games/Taash Game/images/7.png b/Games/Taash Game/images/7.png
diff --git a/Games/Taash Game/images/8.png b/Games/Taash Game/images/8.png
diff --git a/Games/Taash Game/images/9.png b/Games/Taash Game/images/9.png
diff --git a/Games/Taash Game/images/A.png b/Games/Taash Game/images/A.png
diff --git a/Games/Taash Game/images/J.png b/Games/Taash Game/images/J.png
diff --git a/Games/Taash Game/images/K.png b/Games/Taash Game/images/K.png
diff --git a/Games/Taash Game/images/Q.png b/Games/Taash Game/images/Q.png
diff --git a/Games/Taash Game/index.html b/Games/Taash Game/index.html
@@ -0,0 +1,62 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Taash Game</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>Taash Game</h1>
+      <h3><span id="blackjack-result">Let's Play </span></h3>
+
+      <div class="flex-blackjack-row-2">
+        <div id="your-box">
+          <h2>You: <span id="your-blackjack-result"> 0</span></h2>
+        </div>
+
+        <div id="dealer-box">
+          <h2>Dealer: <span id="dealer-blackjack-result"> 0</span></h2>
+        </div>
+      </div>
+
+      <div class="flex-blackjack-row-3">
+        <div>
+          <button class="btn-lg btn-primary mr-2" id="blackjack-hit-button">
+            Hit
+          </button>
+          <button class="btn-lg btn-warning mr-2" id="blackjack-stand-button">
+            Stand
+          </button>
+          <button class="btn-lg btn-danger mr-2" id="blackjack-deal-button">
+            Deal
+          </button>
+          <button class="btn-lg btn-success mr-2" id="blackjack-reset-button">
+            Restart
+          </button>
+        </div>
+      </div>
+      <div class="flex-blackjack-row-1">
+        <table>
+          <tr>
+            <th id="win-header">Win</th>
+            <th id="loss-header">Lose</th>
+            <th id="draw-header">Draw</th>
+          </tr>
+
+          <tr>
+            <td><span id="wins">0</span></td>
+            <td><span id="losses">0</span></td>
+            <td><span id="draws">0</span></td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Taash Game/script.js b/Games/Taash Game/script.js
@@ -0,0 +1,250 @@
+let blackjackGame = {
+  you: {
+    scoreSpan: "#your-blackjack-result",
+    div: "#your-box",
+    boxSize: ".flex-blackjack-row-2 div",
+    score: 0,
+  },
+
+  dealer: {
+    scoreSpan: "#dealer-blackjack-result",
+    div: "#dealer-box",
+    boxSize: ".flex-blackjack-row-2 div",
+    score: 0,
+  },
+
+  cards: ["2", "3", "4", "5", "6", "7", "8", "9", "10", "K", "J", "Q", "A"],
+
+  cardsMap: {
+    2: 2,
+    3: 3,
+    4: 4,
+    5: 5,
+    6: 6,
+    7: 7,
+    8: 8,
+    9: 9,
+    10: 10,
+    K: 10,
+    J: 10,
+    Q: 10,
+    A: [1, 11],
+  },
+
+  wins: 0,
+  losses: 0,
+  draws: 0,
+  isStand: false,
+  isTurnsOver: false,
+  pressOnce: false,
+};
+
+const YOU = blackjackGame["you"];
+const DEALER = blackjackGame["dealer"];
+
+const hitSound = new Audio("sounds/swish.m4a");
+const winSound = new Audio("sounds/cash.mp3");
+const loseSound = new Audio("sounds/aww.mp3");
+
+let windowWidth = window.screen.width;
+let windowHeight = window.screen.height;
+let winner;
+
+//Button Event Listeners
+document
+  .querySelector("#blackjack-hit-button")
+  .addEventListener("click", blackjackHit);
+document
+  .querySelector("#blackjack-stand-button")
+  .addEventListener("click", blackjackStand);
+document
+  .querySelector("#blackjack-deal-button")
+  .addEventListener("click", blackjackDeal);
+document
+  .querySelector("#blackjack-reset-button")
+  .addEventListener("click", blackjackRestart);
+
+function blackjackHit() {
+  if (blackjackGame["isStand"] === false) {
+    let card = randomCard();
+    showCard(card, YOU);
+    updateScore(card, YOU);
+    showScore(YOU);
+  }
+}
+
+function randomCard() {
+  let randomIndex = Math.floor(Math.random() * 13);
+  return blackjackGame["cards"][randomIndex];
+}
+
+function showCard(card, activePlayer) {
+  if (activePlayer["score"] <= 21) {
+    let cardImage = document.createElement("img");
+    cardImage.src = `images/${card}.png`;
+    cardImage.style = `width:${widthSize()}; height:${heightSize()};`;
+    document.querySelector(activePlayer["div"]).appendChild(cardImage);
+    hitSound.play();
+  }
+}
+
+function widthSize() {
+  if (windowWidth > 1000) {
+    let newWidthSize = window.screen.width * 0.1;
+    return newWidthSize;
+  } else {
+    return window.screen.width * 0.18;
+  }
+}
+
+function heightSize() {
+  if (windowHeight > 700) {
+    let newHeightSize = window.screen.height * 0.18;
+    return newHeightSize;
+  } else {
+    return window.screen.height * 0.15;
+  }
+}
+
+function updateScore(card, activePlayer) {
+  if (card === "A") {
+    if (activePlayer["score"] + blackjackGame["cardsMap"][card][1] <= 21) {
+      activePlayer["score"] += blackjackGame["cardsMap"][card][1];
+    } else {
+      activePlayer["score"] += blackjackGame["cardsMap"][card][0];
+    }
+  } else {
+    activePlayer["score"] += blackjackGame["cardsMap"][card];
+  }
+
+  console.log(activePlayer["score"]);
+}
+
+function showScore(activePlayer) {
+  //Bust logic if score is over 21
+  if (activePlayer["score"] > 21) {
+    document.querySelector(activePlayer["scoreSpan"]).textContent = "BUST!";
+    document.querySelector(activePlayer["scoreSpan"]).style.color = "red";
+  } else {
+    document.querySelector(activePlayer["scoreSpan"]).textContent =
+      activePlayer["score"];
+  }
+}
+
+function blackjackStand() {
+  if (blackjackGame.pressOnce === false) {
+    blackjackGame["isStand"] = true;
+    let yourImages = document
+      .querySelector("#your-box")
+      .querySelectorAll("img");
+
+    for (let i = 0; i < yourImages.length; i++) {
+      let card = randomCard();
+      showCard(card, DEALER);
+      updateScore(card, DEALER);
+      showScore(DEALER);
+    }
+
+    blackjackGame["isTurnsOver"] = true;
+
+    computeWinner();
+    showWinner(winner);
+  }
+
+  blackjackGame.pressOnce = true;
+}
+
+function computeWinner() {
+  if (YOU["score"] <= 21) {
+    if (YOU["score"] > DEALER["score"] || DEALER["score"] > 21) {
+      winner = YOU;
+    } else if (YOU["score"] < DEALER["score"]) {
+      winner = DEALER;
+    } else if (YOU["score"] === DEALER["score"]) {
+      winner = "Draw";
+    }
+  } else if (YOU["score"] > 21 && DEALER["score"] <= 21) {
+    winner = DEALER;
+  } else if (YOU["score"] > 21 && DEALER["score"] > 21) {
+    winner = "None";
+  }
+
+  return winner;
+}
+
+function showWinner(winner) {
+  let message, messageColor;
+
+  if (winner === YOU) {
+    message = "You Won";
+    messageColor = "#00e676";
+    document.querySelector("#wins").textContent = blackjackGame["wins"] += 1;
+    winSound.play();
+  } else if (winner === DEALER) {
+    message = "You Lost";
+    messageColor = "red";
+    document.querySelector("#losses").textContent = blackjackGame[
+      "losses"
+    ] += 1;
+    loseSound.play();
+  } else if (winner === "Draw") {
+    message = "You Drew";
+    messageColor = "yellow";
+    document.querySelector("#draws").textContent = blackjackGame["draws"] += 1;
+    loseSound.play();
+  } else if (winner === "None") {
+    message = "You Both Busted!";
+    messageColor = "orange";
+    loseSound.play();
+  }
+
+  document.querySelector("#blackjack-result").textContent = message;
+  document.querySelector("#blackjack-result").style.color = messageColor;
+}
+
+function blackjackDeal() {
+  if (blackjackGame["isTurnsOver"] === true) {
+    // Select all the images in both the user and dealer box
+    let yourImages = document
+      .querySelector("#your-box")
+      .querySelectorAll("img");
+    let dealerImages = document
+      .querySelector("#dealer-box")
+      .querySelectorAll("img");
+
+    document.querySelector("#blackjack-result").style.color = "white";
+
+    //Sets the user and dealers scors to zero
+    YOU["score"] = DEALER["score"] = 0;
+    document.querySelector("#your-blackjack-result").textContent = 0;
+    document.querySelector("#dealer-blackjack-result").textContent = 0;
+
+    //Reset color back to white
+    document.querySelector("#your-blackjack-result").style.color = "white";
+    document.querySelector("#dealer-blackjack-result").style.color = "white";
+
+    //Reset to Let's Play
+    document.querySelector("#blackjack-result").textContent = "Lets Play";
+
+    //Removes the cards in the user's box
+    for (let i = 0; i < yourImages.length; i++) {
+      yourImages[i].remove();
+      dealerImages[i].remove();
+    }
+
+    blackjackGame["isStand"] = false;
+    blackjackGame.pressOnce = false;
+    blackjackGame["isTurnsOver"] = false;
+  }
+}
+
+function blackjackRestart() {
+  blackjackDeal();
+  document.querySelector("#wins").textContent = 0;
+  document.querySelector("#losses").textContent = 0;
+  document.querySelector("#draws").textContent = 0;
+
+  blackjackGame.wins = 0;
+  blackjackGame.losses = 0;
+  blackjackGame.draws = 0;
+}
diff --git a/Games/Taash Game/sounds/aww.mp3 b/Games/Taash Game/sounds/aww.mp3
diff --git a/Games/Taash Game/sounds/cash.mp3 b/Games/Taash Game/sounds/cash.mp3
diff --git a/Games/Taash Game/sounds/clap.mp3 b/Games/Taash Game/sounds/clap.mp3
@@ -0,0 +1 @@
+
diff --git a/Games/Taash Game/sounds/swish.m4a b/Games/Taash Game/sounds/swish.m4a
diff --git a/Games/Taash Game/style.css b/Games/Taash Game/style.css
@@ -0,0 +1,65 @@
+body {
+  background: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+   padding:10px;
+}
+
+
+.container {
+  margin: 0 auto;
+  text-align: center;
+  color: white;
+    width:75%;
+
+}
+
+.flex-blackjack-row-1,
+.flex-blackjack-row-2,
+.flex-blackjack-row-3 {
+  display: flex;
+  padding: 5px;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.flex-blackjack-row-2 div {
+  padding: 10px;
+  border: 1px solid black;
+
+  flex: 1;
+  height: 350px;
+  text-align: center;
+}
+
+.flex-blackjack-row-2 div img {
+  padding: 10px;
+}
+
+table {
+    border: 3px solid black;
+    border-collapse: collapse;
+    padding:10px;
+    width:45%;
+    background-color: white;
+    text-align: center;
+}
+table td {
+    border: 2px solid black;
+}
+
+.flex-blackjack-row-3 div {
+  padding: 5px;
+}
+
+.flex-blackjack-row-3 button {
+  padding: 10 px;
+  margin-bottom: 10px;
+}
+
+.flex-blackjack-row-2, .flex-blackjack-row-3{
+  background-image: url(https://i.stack.imgur.com/q02th.jpg);
+  border: 3px solid black;
+}