Merge pull request #2929 from Sushilverma002/main

[Enhancement]: hang man game is updated with UI and more functionality
kunjgit · Oct 3, 2023 · ce99f42 · ce99f42
2 parents 668df54 + 31968fc
commit ce99f42
Show file tree

Hide file tree

Showing 18 changed files with 673 additions and 793 deletions.
diff --git a/Games/HangMan/README.md b/Games/HangMan/README.md
@@ -1,27 +1,32 @@
-# **Game_Name** 
-HangMan
----
+# **Game_Name**
+
+## HangMan
 
 <br>
 
 ## **Description 📃**
+
 <!-- add your game description here  -->
-A guessing game where you are supposed to guess the given word within the alloted number of lives.
 
+A guessing game where you are supposed to guess the given word within the alloted number of lives.
 
 ## **functionalities 🎮**
+
 <!-- add functionalities over here -->
--You begin the game and a pick a category. <br>
+
+-You begin the game. <br>
 -A random word from the picked category in generated in a hidden way. <br>
 -The player can try to guess the word by guessing each letter. <br>
+-The hint is given in some sentences the player have to gusses the word according to given HINT. <br>
 -The man hanging gets a new body part each time the player makes a wrong guess. <br>
 -The letter will be revealed at its supposed location when the player makes a right guess. <br>
 
 <br>
 
 ## **How to play? 🕹️**
+
 <!-- add the steps how to play games -->
--Pick a category. <br>
+
 -Guess a letter. <br>
 -Keep guessing a letter that could be present in the word until you get the word right. <br>
 -For every wrong guess the stick figure gains a body part and the game is over when he gets a head, body and all four limbs. <br>
@@ -31,6 +36,3 @@ A guessing game where you are supposed to guess the given word within the allote
 ## **Screenshots 📸**
 
 <br>
-<!-- add your screenshots like this -->
-
-![HangMan](https://github.com/MrVisc/GameZone/assets/83546275/bf16fd32-6f96-43a9-988c-8d38b764fa3d)
diff --git a/Games/HangMan/images/hangman-0.svg b/Games/HangMan/images/hangman-0.svg
diff --git a/Games/HangMan/images/hangman-1.svg b/Games/HangMan/images/hangman-1.svg
diff --git a/Games/HangMan/images/hangman-2.svg b/Games/HangMan/images/hangman-2.svg
diff --git a/Games/HangMan/images/hangman-3.svg b/Games/HangMan/images/hangman-3.svg
diff --git a/Games/HangMan/images/hangman-4.svg b/Games/HangMan/images/hangman-4.svg
diff --git a/Games/HangMan/images/hangman-5.svg b/Games/HangMan/images/hangman-5.svg
diff --git a/Games/HangMan/images/hangman-6.svg b/Games/HangMan/images/hangman-6.svg
diff --git a/Games/HangMan/images/lost.gif b/Games/HangMan/images/lost.gif
diff --git a/Games/HangMan/images/victory.gif b/Games/HangMan/images/victory.gif
diff --git a/Games/HangMan/index.html b/Games/HangMan/index.html
@@ -1,28 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hangman</title>
-    <!-- Stylesheet -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <div style="text-align:center;
-    margin-top: 30px;
-    font-size: 30px;
-    padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hangman Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="scripts/word-list.js" defer></script>
+    <script src="scripts/script.js" defer></script>
+</head>
+<body>
+  <div style="text-align:center;
+  margin-top: 30px;
+  font-size: 30px;
+  padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a></div>    <div class="game-modal">
+        <div class="content">
+            <img src="#" alt="gif">
+            <h4>Game Over!</h4>
+            <p>The correct word was: <b>rainbow</b></p>
+            <button class="play-again">Play Again</button>
+        </div>
+    </div>
     <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 class="hangman-box">
+            <img src="#" draggable="false" alt="hangman-img">
+            <h1>Hangman Game</h1>
+        </div>
+        <div class="game-box">
+            <ul class="word-display"></ul>
+            <h4 class="hint-text">Hint: <b></b></h4>
+            <h4 class="guesses-text">Incorrect guesses: <b></b></h4>
+            <div class="keyboard"></div>
+        </div>
     </div>
-    <!-- Script -->
-    <script src="script.js"></script>
-  </body>
+</body>
 </html>