Add HangMan Game (#543)

Fixed Hangman Game to the Website , Add SWOC labels to this PR @dhairyagothi Screenrecording : https://github.com/user-attachments/assets/6ceebe3a-56d7-45bf-bda8-f94c045ffcc9
dhairyagothi · Jan 16, 2025 · 53eeac5 · 53eeac5
2 parents 821ae44 + f65b566
commit 53eeac5
Show file tree

Hide file tree

Showing 13 changed files with 737 additions and 68 deletions.
diff --git a/index.js b/index.js
diff --git a/public/HangmanGame/images/hangman-0.svg b/public/HangmanGame/images/hangman-0.svg
diff --git a/public/HangmanGame/images/hangman-1.svg b/public/HangmanGame/images/hangman-1.svg
diff --git a/public/HangmanGame/images/hangman-2.svg b/public/HangmanGame/images/hangman-2.svg
diff --git a/public/HangmanGame/images/hangman-3.svg b/public/HangmanGame/images/hangman-3.svg
diff --git a/public/HangmanGame/images/hangman-4.svg b/public/HangmanGame/images/hangman-4.svg
diff --git a/public/HangmanGame/images/hangman-5.svg b/public/HangmanGame/images/hangman-5.svg
diff --git a/public/HangmanGame/images/hangman-6.svg b/public/HangmanGame/images/hangman-6.svg
diff --git a/public/HangmanGame/images/lost.gif b/public/HangmanGame/images/lost.gif
diff --git a/public/HangmanGame/images/victory.gif b/public/HangmanGame/images/victory.gif
diff --git a/public/HangmanGame/index.html b/public/HangmanGame/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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="script.js" defer></script>
+</head>
+<body>
+    <h1>Hangman Game</h1>
+    <div class="game-modal">
+        <div class="content">
+            <img src="#" alt="Game Over Animation">
+            <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 class="hangman-box">
+            <img src="#" draggable="false" alt="Hangman Image">
+            <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>
+</body>
+</html>