Merge pull request #4947 from yamini777/Hangman_Game

Added Hangman Game
kunjgit · Jul 26, 2024 · a4fa6a0 · a4fa6a0
2 parents c6f2f22 + 70c6f8e
commit a4fa6a0
Show file tree

Hide file tree

Showing 7 changed files with 445 additions and 0 deletions.
diff --git a/Games/Hangman_Game/README.md b/Games/Hangman_Game/README.md
@@ -0,0 +1,37 @@
+# **Game_Name** 
+
+Hangman Game
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- **Hangman Game** is an interactive game where you have to guess the word in six chances.
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+- You have to select one category ,on the basis of that category you have to guess the word.
+- You have six chances in which you have guess,when you choose wrong letter then one by one the part of the man form.
+- If you not able to guess till the man form then the game ends. 
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- First choose the option whose word you want to guess.
+- Guess the word within six chances.
+- If the guess is correct you win else lose.
+- Then play again .
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+![image](../../assets/images/Hangman_Game.png)
+
+
+<br>
+
+<!-- ## **Working video 📹** -->
+<!-- add your working video over here -->
diff --git a/Games/Hangman_Game/index.html b/Games/Hangman_Game/index.html
@@ -0,0 +1,29 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hangman Game</title>
+    <!-- Google Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div id="options-container"></div>
+      <div id="letter-container" class="letter-container hide"></div>
+      <div id="user-input-section"></div>
+      <canvas id="canvas"></canvas>
+      <div id="new-game-container" class="new-game-popup hide">
+        <div id="result-text"></div>
+        <button id="new-game-button">New Game</button>
+      </div>
+    </div>
+    <!-- Script -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Hangman_Game/script.js b/Games/Hangman_Game/script.js
@@ -0,0 +1,248 @@
+//Initial References
+const letterContainer = document.getElementById("letter-container");
+const optionsContainer = document.getElementById("options-container");
+const userInputSection = document.getElementById("user-input-section");
+const newGameContainer = document.getElementById("new-game-container");
+const newGameButton = document.getElementById("new-game-button");
+const canvas = document.getElementById("canvas");
+const resultText = document.getElementById("result-text");
+
+//Options values for buttons
+let options = {
+  fruits: [
+    "Apple",
+    "Blueberry",
+    "Mandarin",
+    "Pineapple",
+    "Pomegranate",
+    "Watermelon",
+    "Banana",
+    "Cherry",
+    "Avocado",
+    "Peach",
+  ],
+  animals: ["Elephant", "Rhinoceros", "Squirrel", "Panther", "Tiger", "Zebra","Monkey","Horse","Goat","Eagle"],
+  countries: [
+    "India",
+    "Hungary",
+    "Kyrgyzstan",
+    "Switzerland",
+    "Zimbabwe",
+    "Dominica",
+    "Spain",
+    "Tibet",
+    "Algeria",
+    "Cyprus",
+  ],
+  colors: ["Turquoise","Beige","Azure","lavender","Yellow","Ivory","Coral","Indigo","Maroon","Emerald"],
+};
+
+//count
+let winCount = 0;
+let count = 0;
+
+let chosenWord = "";
+
+//Display option buttons
+const displayOptions = () => {
+  optionsContainer.innerHTML += `<h1>Please Select An Option</h1>`;
+  let buttonCon = document.createElement("div");
+  for (let value in options) {
+    buttonCon.innerHTML += `<button class="options" onclick="generateWord('${value}')">${value}</button>`;
+  }
+  optionsContainer.appendChild(buttonCon);
+};
+
+//Block all the Buttons
+const blocker = () => {
+  let optionsButtons = document.querySelectorAll(".options");
+  let letterButtons = document.querySelectorAll(".letters");
+  //disable all options
+  optionsButtons.forEach((button) => {
+    button.disabled = true;
+  });
+
+  //disable all letters
+  letterButtons.forEach((button) => {
+    button.disabled.true;
+  });
+  newGameContainer.classList.remove("hide");
+};
+
+//Word Generator
+const generateWord = (optionValue) => {
+  let optionsButtons = document.querySelectorAll(".options");
+  //If optionValur matches the button innerText then highlight the button
+  optionsButtons.forEach((button) => {
+    if (button.innerText.toLowerCase() === optionValue) {
+      button.classList.add("active");
+    }
+    button.disabled = true;
+  });
+
+  //initially hide letters, clear previous word
+  letterContainer.classList.remove("hide");
+  userInputSection.innerText = "";
+
+  let optionArray = options[optionValue];
+  //choose random word
+  chosenWord = optionArray[Math.floor(Math.random() * optionArray.length)];
+  chosenWord = chosenWord.toUpperCase();
+
+  //replace every letter with span containing dash
+  let displayItem = chosenWord.replace(/./g, '<span class="dashes">_</span>');
+
+  //Display each element as span
+  userInputSection.innerHTML = displayItem;
+};
+
+//Initial Function (Called when page loads/user presses new game)
+const initializer = () => {
+  winCount = 0;
+  count = 0;
+
+  //Initially erase all content and hide letteres and new game button
+  userInputSection.innerHTML = "";
+  optionsContainer.innerHTML = "";
+  letterContainer.classList.add("hide");
+  newGameContainer.classList.add("hide");
+  letterContainer.innerHTML = "";
+
+  //For creating letter buttons
+  for (let i = 65; i < 91; i++) {
+    let button = document.createElement("button");
+    button.classList.add("letters");
+    //Number to ASCII[A-Z]
+    button.innerText = String.fromCharCode(i);
+    //character button click
+    button.addEventListener("click", () => {
+      let charArray = chosenWord.split("");
+      let dashes = document.getElementsByClassName("dashes");
+      //if array contains clciked value replace the matched dash with letter else dram on canvas
+      if (charArray.includes(button.innerText)) {
+        charArray.forEach((char, index) => {
+          //if character in array is same as clicked button
+          if (char === button.innerText) {
+            //replace dash with letter
+            dashes[index].innerText = char;
+            //increment counter
+            winCount += 1;
+            //if winCount equals word lenfth
+            if (winCount == charArray.length) {
+              resultText.innerHTML = `<h2 class='win-msg'>You Win :) </h2><p>The word was <span>${chosenWord}</span></p>`;
+              //block all buttons
+              blocker();
+            }
+          }
+        });
+      } else {
+        //lose count
+        count += 1;
+        //for drawing man
+        drawMan(count);
+        //Count==6 because head,body,left arm, right arm,left leg,right leg
+        if (count == 6) {
+          resultText.innerHTML = `<h2 class='lose-msg'>You Lose :( </h2><p>The word was <span>${chosenWord}</span></p>`;
+          blocker();
+        }
+      }
+      //disable clicked button
+      button.disabled = true;
+    });
+    letterContainer.append(button);
+  }
+
+  displayOptions();
+  //Call to canvasCreator (for clearing previous canvas and creating initial canvas)
+  let { initialDrawing } = canvasCreator();
+  //initialDrawing would draw the frame
+  initialDrawing();
+};
+
+//Canvas
+const canvasCreator = () => {
+  let context = canvas.getContext("2d");
+  context.beginPath();
+  context.strokeStyle = "#000";
+  context.lineWidth = 2;
+
+  //For drawing lines
+  const drawLine = (fromX, fromY, toX, toY) => {
+    context.moveTo(fromX, fromY);
+    context.lineTo(toX, toY);
+    context.stroke();
+  };
+
+  const head = () => {
+    context.beginPath();
+    context.arc(70, 30, 10, 0, Math.PI * 2, true);
+    context.stroke();
+  };
+
+  const body = () => {
+    drawLine(70, 40, 70, 80);
+  };
+
+  const leftArm = () => {
+    drawLine(70, 50, 50, 70);
+  };
+
+  const rightArm = () => {
+    drawLine(70, 50, 90, 70);
+  };
+
+  const leftLeg = () => {
+    drawLine(70, 80, 50, 110);
+  };
+
+  const rightLeg = () => {
+    drawLine(70, 80, 90, 110);
+  };
+
+  //initial frame
+  const initialDrawing = () => {
+    //clear canvas
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+    //bottom line
+    drawLine(10, 130, 130, 130);
+    //left line
+    drawLine(10, 10, 10, 131);
+    //top line
+    drawLine(10, 10, 70, 10);
+    //small top line
+    drawLine(70, 10, 70, 20);
+  };
+
+  return { initialDrawing, head, body, leftArm, rightArm, leftLeg, rightLeg };
+};
+
+//draw the man
+const drawMan = (count) => {
+  let { head, body, leftArm, rightArm, leftLeg, rightLeg } = canvasCreator();
+  switch (count) {
+    case 1:
+      head();
+      break;
+    case 2:
+      body();
+      break;
+    case 3:
+      leftArm();
+      break;
+    case 4:
+      rightArm();
+      break;
+    case 5:
+      leftLeg();
+      break;
+    case 6:
+      rightLeg();
+      break;
+    default:
+      break;
+  }
+};
+
+//New Game
+newGameButton.addEventListener("click", initializer);
+window.onload = initializer;