finalizing the project

Abood-New · May 27, 2024 · 4a45d8a · 4a45d8a
1 parent e551d30
commit 4a45d8a
Show file tree

Hide file tree

Showing 13 changed files with 676 additions and 0 deletions.
diff --git a/images/hangman-0.svg b/images/hangman-0.svg
diff --git a/images/hangman-1.svg b/images/hangman-1.svg
diff --git a/images/hangman-2.svg b/images/hangman-2.svg
diff --git a/images/hangman-3.svg b/images/hangman-3.svg
diff --git a/images/hangman-4.svg b/images/hangman-4.svg
diff --git a/images/hangman-5.svg b/images/hangman-5.svg
diff --git a/images/hangman-6.svg b/images/hangman-6.svg
diff --git a/images/lost.gif b/images/lost.gif
diff --git a/images/victory.gif b/images/victory.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hangaman-Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="game-modal">
+        <div class="content">
+            <img src="images/lost.gif" 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 class="hangman-box">
+            <img src="./images/hangman-0.svg" alt="hangman-img">
+            <h1>Hangaman Game</h1>
+        </div>
+        <div class="game-box">
+            <ul class="word-display">
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+                <li class="letter"></li>
+            </ul>
+            <h4 class="hint-text">
+                Hint:
+                <b>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, quibusdam.</b>
+            </h4>
+            <h4 class="guesses-text">
+                Incorrect guesses:
+                <b>0 / 6</b>
+            </h4>
+            <div class="keyboard">
+            </div>
+        </div>
+    </div>
+</body>
+<script src="./scripts/word-list.js"></script>
+<script src="./scripts/script.js"></script>
+
+</html>
diff --git a/scripts/script.js b/scripts/script.js
@@ -0,0 +1,69 @@
+const keyboardDiv = document.querySelector(".keyboard")
+const wordDisplay = document.querySelector(".word-display")
+const guessesText = document.querySelector(".guesses-text b");
+const hangmanImage = document.querySelector(".hangman-box img");
+const gameModal = document.querySelector(".game-modal");
+const playAgainBtn = document.querySelector(".play-again");
+
+let currentWord, correctLetters = [], wrongGuessCount = 0;
+const maxGuesses = 6;
+
+const resetGame = () => {
+    correctLetters = []
+    wrongGuessCount = 0;
+    wordDisplay.innerHTML = currentWord.split("").map(() => `<li class="letter"></li>`).join("");
+    gameModal.classList.remove("show");
+    hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`;
+    guessesText.innerHTML = `${wrongGuessCount} / ${maxGuesses}`
+    keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false);
+}
+const getRandomWord = () => {
+    const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)]
+    currentWord = word;
+    document.querySelector(".hint-text b").innerHTML = hint;
+    resetGame();
+    wordDisplay.innerHTML = word.split("").map(() => `<li class="letter"></li>`).join("");
+}
+
+const gameOver = (isVictory) => {
+    setTimeout(() => {
+        const modalText = isVictory ? `You found the word: ` : `The correct word was: `;
+        gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`;
+        gameModal.querySelector("h4").innerHTML = `${isVictory ? 'Congrats!' : 'Game Over!'}`;
+        gameModal.querySelector("p").innerHTML = ` ${modalText} <b>${currentWord}</b>`;
+        gameModal.classList.add("show");
+    }, 300)
+}
+
+const initGame = (button, clickedLetter) => {
+    button.classList.add("clicked")
+    if (currentWord.includes(clickedLetter)) {
+        [...currentWord].forEach((letter, index) => {
+            if (letter === clickedLetter) {
+                correctLetters.push(letter)
+                wordDisplay.querySelectorAll("li")[index].innerHTML = letter
+                wordDisplay.querySelectorAll("li")[index].classList.add("guessed")
+            }
+        });
+    } else {
+        wrongGuessCount++;
+        hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`;
+    }
+    guessesText.innerHTML = `${wrongGuessCount} / ${maxGuesses}`
+
+    if (wrongGuessCount === maxGuesses) return gameOver(false);
+    if (correctLetters.length === currentWord.length) return gameOver(true);
+
+}
+// Creating Keyboard Buttons & Add Event Listener
+for (let i = 97; i <= 122; i++) {
+    const button = document.createElement("button")
+    button.innerHTML = String.fromCharCode(i);
+    keyboardDiv.appendChild(button);
+    button.addEventListener("click", e => initGame(e.target, String.fromCharCode(i)))
+}
+
+getRandomWord();
+playAgainBtn.addEventListener("click", () => {
+    getRandomWord();
+})