Fixes the hang man game

- Fixing a bug that led to premature winning for words that contains two or more of the same letter. - Adding a qwerty keyboard for a better user experience
kunjgit · Jan 31, 2024 · 75cae00 · 75cae00
1 parent d465444
commit 75cae00
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 24 deletions.
diff --git a/Games/HangMan/scripts/script.js b/Games/HangMan/scripts/script.js
@@ -23,7 +23,7 @@ const resetGame = () => {
 const getRandomWord = () => {
     // Selecting a random word and hint from the wordList
     const { word, hint } = wordList[Math.floor(Math.random() * wordList.length)];
-    currentWord = word; // Making currentWord as random word
+    currentWord = word.toUpperCase(); // Making currentWord as random word
     document.querySelector(".hint-text b").innerText = hint;
     resetGame();
 }
@@ -37,37 +37,67 @@ const gameOver = (isVictory) => {
     gameModal.classList.add("show");
 }
 
-const initGame = (button, clickedLetter) => {
-    // Checking if clickedLetter is exist on the currentWord
+
+const initGame = (clickedLetter) => {
+    let guessedAll = true;
+
+    // Checking if clickedLetter exists in the currentWord
     if(currentWord.includes(clickedLetter)) {
         // Showing all correct letters on the word display
         [...currentWord].forEach((letter, index) => {
             if(letter === clickedLetter) {
-                correctLetters.push(letter);
+                correctLetters[index] = letter; // Storing correct letters with their position
                 wordDisplay.querySelectorAll("li")[index].innerText = letter;
                 wordDisplay.querySelectorAll("li")[index].classList.add("guessed");
             }
         });
     } else {
-        // If clicked letter doesn't exist then update the wrongGuessCount and hangman image
+        // If clicked letter doesn't exist, then update the wrongGuessCount and hangman image
         wrongGuessCount++;
         hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`;
+        guessedAll = false;
     }
-    button.disabled = true; // Disabling the clicked button so user can't click again
+
+    // Disabling the clicked button
+    document.querySelectorAll(`.keyboard button`).forEach(button => {
+        if (button.innerText === clickedLetter) {
+            button.disabled = true;
+        }
+    });
+
     guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`;
 
-    // Calling gameOver function if any of these condition meets
+    // Checking if all letters have been guessed correctly
+    [...currentWord].forEach((letter, index) => {
+        if (correctLetters[index] !== letter) {
+            guessedAll = false;
+        }
+    });
+
+    // Calling gameOver function if any of these conditions meet
     if(wrongGuessCount === maxGuesses) return gameOver(false);
-    if(correctLetters.length === currentWord.length) return gameOver(true);
+    if(guessedAll) return gameOver(true);
 }
 
-// Creating keyboard buttons and adding event listeners
-for (let i = 97; i <= 122; i++) {
-    const button = document.createElement("button");
-    button.innerText = String.fromCharCode(i);
-    keyboardDiv.appendChild(button);
-    button.addEventListener("click", (e) => initGame(e.target, String.fromCharCode(i)));
-}
+
+// Creating a qwerty keyboard button and adding event listeners
+const qwertyRows = [
+    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+    ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
+];
+
+qwertyRows.forEach(row => {
+    const rowDiv = document.createElement("div");
+    rowDiv.className = "keyboard-row";
+    row.forEach(letter => {
+        const button = document.createElement("button");
+        button.innerText = letter;
+        rowDiv.appendChild(button);
+        button.addEventListener("click", () => initGame(letter));
+    });
+    keyboardDiv.appendChild(rowDiv);
+});
 
 getRandomWord();
 playAgainBtn.addEventListener("click", getRandomWord);
diff --git a/Games/HangMan/style.css b/Games/HangMan/style.css
@@ -1,22 +1,26 @@
 /* Importing Google font - Open Sans */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Open Sans", sans-serif;
 }
+
 body {
     display: flex;
     padding: 0 10px;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
-    background: #5E63BA;
+    background: #5E63BA;;
 }
+
+
 .container {
     display: flex;
-    width: 850px;
+    width: 1080px;
     gap: 70px;
     padding: 60px 40px;
     background: #fff;
@@ -25,16 +29,19 @@ body {
     justify-content: space-between;
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
+
 .hangman-box img {
     user-select: none;
     max-width: 270px;
 }
+
 .hangman-box h1 {
     font-size: 1.45rem;
     text-align: center;
     margin-top: 20px;
     text-transform: uppercase;
 }
+
 .game-box .word-display {
     gap: 10px;
     list-style: none;
@@ -43,6 +50,7 @@ body {
     justify-content: center;
     align-items: center;
 }
+
 .word-display .letter {
     width: 28px;
     font-size: 2rem;
@@ -52,48 +60,71 @@ body {
     text-transform: uppercase;
     border-bottom: 3px solid #000;
 }
+
 .word-display .letter.guessed {
     margin: -40px 0 35px;
     border-color: transparent;
 }
+
 .game-box h4 {
     text-align: center;
     font-size: 1.1rem;
     font-weight: 500;
     margin-bottom: 15px;
 }
+
 .game-box h4 b {
     font-weight: 600;
 }
+
 .game-box .guesses-text b {
     color: #ff0000;
 }
+
 .game-box .keyboard {
     display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 10px;
     margin-top: 40px;
+    align-items: center;
+}
+
+.keyboard-row {
+    display: flex;
+    gap: 5px;
+    width: 100%;
     justify-content: center;
 }
+
 :where(.game-modal, .keyboard) button {
     color: #fff;
     border: none;
     outline: none;
     cursor: pointer;
-    font-size: 1rem;
+    font-size: 15px;
     font-weight: 600;
     border-radius: 4px;
     text-transform: uppercase;
     background: #5E63BA;
+    padding: 20px;
+    font-weight: bold;
+    min-width: 60px;
+
+}
+
+/* Adjusting button width based on QWERTY layout */
+.keyboard-row:nth-child(1) button {
 }
-.keyboard button {
-    padding: 7px;
-    width: calc(100% / 9 - 5px);
+
+.keyboard-row:nth-child(2) button,
+.keyboard-row:nth-child(3) button {
 }
+
 .keyboard button[disabled] {
     pointer-events: none;
     opacity: 0.6;
 }
+
 :where(.game-modal, .keyboard) button:hover {
     background: #8286c9;
 }
@@ -184,4 +215,4 @@ body {
     .game-modal button {
         padding: 10px 18px;
     }
-}
+}