Game Over!
+The correct word was: rainbow
+ +
+ 
+
+ The correct word was: rainbow
+ +The word was ${chosenWord}
`; - //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 = `The word was ${chosenWord}
`; - 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; \ No newline at end of file diff --git a/Games/HangMan/scripts/script.js b/Games/HangMan/scripts/script.js new file mode 100644 index 0000000000..7a596c8614 --- /dev/null +++ b/Games/HangMan/scripts/script.js @@ -0,0 +1,73 @@ +const wordDisplay = document.querySelector(".word-display"); +const guessesText = document.querySelector(".guesses-text b"); +const keyboardDiv = document.querySelector(".keyboard"); +const hangmanImage = document.querySelector(".hangman-box img"); +const gameModal = document.querySelector(".game-modal"); +const playAgainBtn = gameModal.querySelector("button"); + +// Initializing game variables +let currentWord, correctLetters, wrongGuessCount; +const maxGuesses = 6; + +const resetGame = () => { + // Ressetting game variables and UI elements + correctLetters = []; + wrongGuessCount = 0; + hangmanImage.src = "images/hangman-0.svg"; + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + wordDisplay.innerHTML = currentWord.split("").map(() => ``).join(""); + keyboardDiv.querySelectorAll("button").forEach(btn => btn.disabled = false); + gameModal.classList.remove("show"); +} + +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 + document.querySelector(".hint-text b").innerText = hint; + resetGame(); +} + +const gameOver = (isVictory) => { + // After game complete.. showing modal with relevant details + const modalText = isVictory ? `You found the word:` : 'The correct word was:'; + gameModal.querySelector("img").src = `images/${isVictory ? 'victory' : 'lost'}.gif`; + gameModal.querySelector("h4").innerText = isVictory ? 'Congrats!' : 'Game Over!'; + gameModal.querySelector("p").innerHTML = `${modalText} ${currentWord}`; + gameModal.classList.add("show"); +} + +const initGame = (button, clickedLetter) => { + // Checking if clickedLetter is exist on the currentWord + if(currentWord.includes(clickedLetter)) { + // Showing all correct letters on the word display + [...currentWord].forEach((letter, index) => { + if(letter === clickedLetter) { + correctLetters.push(letter); + 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 + wrongGuessCount++; + hangmanImage.src = `images/hangman-${wrongGuessCount}.svg`; + } + button.disabled = true; // Disabling the clicked button so user can't click again + guessesText.innerText = `${wrongGuessCount} / ${maxGuesses}`; + + // Calling gameOver function if any of these condition meets + if(wrongGuessCount === maxGuesses) return gameOver(false); + if(correctLetters.length === currentWord.length) 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))); +} + +getRandomWord(); +playAgainBtn.addEventListener("click", getRandomWord); \ No newline at end of file diff --git a/Games/HangMan/scripts/word-list.js b/Games/HangMan/scripts/word-list.js new file mode 100644 index 0000000000..61107d9990 --- /dev/null +++ b/Games/HangMan/scripts/word-list.js @@ -0,0 +1,262 @@ +const wordList = [ + { + word: "guitar", + hint: "A musical instrument with strings." + }, + { + word: "oxygen", + hint: "A colorless, odorless gas essential for life." + }, + { + word: "mountain", + hint: "A large natural elevation of the Earth's surface." + }, + { + word: "painting", + hint: "An art form using colors on a surface to create images or expression." + }, + { + word: "astronomy", + hint: "The scientific study of celestial objects and phenomena." + }, + { + word: "football", + hint: "A popular sport played with a spherical ball." + }, + { + word: "chocolate", + hint: "A sweet treat made from cocoa beans." + }, + { + word: "butterfly", + hint: "An insect with colorful wings and a slender body." + }, + { + word: "history", + hint: "The study of past events and human civilization." + }, + { + word: "pizza", + hint: "A savory dish consisting of a round, flattened base with toppings." + }, + { + word: "jazz", + hint: "A genre of music characterized by improvisation and syncopation." + }, + { + word: "camera", + hint: "A device used to capture and record images or videos." + }, + { + word: "diamond", + hint: "A precious gemstone known for its brilliance and hardness." + }, + { + word: "adventure", + hint: "An exciting or daring experience." + }, + { + word: "science", + hint: "The systematic study of the structure and behavior of the physical and natural world." + }, + { + word: "bicycle", + hint: "A human-powered vehicle with two wheels." + }, + { + word: "sunset", + hint: "The daily disappearance of the sun below the horizon." + }, + { + word: "coffee", + hint: "A popular caffeinated beverage made from roasted coffee beans." + }, + { + word: "dance", + hint: "A rhythmic movement of the body often performed to music." + }, + { + word: "galaxy", + hint: "A vast system of stars, gas, and dust held together by gravity." + }, + { + word: "orchestra", + hint: "A large ensemble of musicians playing various instruments." + }, + { + word: "volcano", + hint: "A mountain or hill with a vent through which lava, rock fragments, hot vapor, and gas are ejected." + }, + { + word: "novel", + hint: "A long work of fiction, typically with a complex plot and characters." + }, + { + word: "sculpture", + hint: "A three-dimensional art form created by shaping or combining materials." + }, + { + word: "symphony", + hint: "A long musical composition for a full orchestra, typically in multiple movements." + }, + { + word: "architecture", + hint: "The art and science of designing and constructing buildings." + }, + { + word: "ballet", + hint: "A classical dance form characterized by precise and graceful movements." + }, + { + word: "astronaut", + hint: "A person trained to travel and work in space." + }, + { + word: "waterfall", + hint: "A cascade of water falling from a height." + }, + { + word: "technology", + hint: "The application of scientific knowledge for practical purposes." + }, + { + word: "rainbow", + hint: "A meteorological phenomenon that is caused by reflection, refraction, and dispersion of light." + }, + { + word: "universe", + hint: "All existing matter, space, and time as a whole." + }, + { + word: "piano", + hint: "A musical instrument played by pressing keys that cause hammers to strike strings." + }, + { + word: "vacation", + hint: "A period of time devoted to pleasure, rest, or relaxation." + }, + { + word: "rainforest", + hint: "A dense forest characterized by high rainfall and biodiversity." + }, + { + word: "theater", + hint: "A building or outdoor area in which plays, movies, or other performances are staged." + }, + { + word: "telephone", + hint: "A device used to transmit sound over long distances." + }, + { + word: "language", + hint: "A system of communication consisting of words, gestures, and syntax." + }, + { + word: "desert", + hint: "A barren or arid land with little or no precipitation." + }, + { + word: "sunflower", + hint: "A tall plant with a large yellow flower head." + }, + { + word: "fantasy", + hint: "A genre of imaginative fiction involving magic and supernatural elements." + }, + { + word: "telescope", + hint: "An optical instrument used to view distant objects in space." + }, + { + word: "breeze", + hint: "A gentle wind." + }, + { + word: "oasis", + hint: "A fertile spot in a desert where water is found." + }, + { + word: "photography", + hint: "The art, process, or practice of creating images by recording light or other electromagnetic radiation." + }, + { + word: "safari", + hint: "An expedition or journey, typically to observe wildlife in their natural habitat." + }, + { + word: "planet", + hint: "A celestial body that orbits a star and does not produce light of its own." + }, + { + word: "river", + hint: "A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." + }, + { + word: "tropical", + hint: "Relating to or situated in the region between the Tropic of Cancer and the Tropic of Capricorn." + }, + { + word: "mysterious", + hint: "Difficult or impossible to understand, explain, or identify." + }, + { + word: "enigma", + hint: "Something that is mysterious, puzzling, or difficult to understand." + }, + { + word: "paradox", + hint: "A statement or situation that contradicts itself or defies intuition." + }, + { + word: "puzzle", + hint: "A game, toy, or problem designed to test ingenuity or knowledge." + }, + { + word: "whisper", + hint: "To speak very softly or quietly, often in a secretive manner." + }, + { + word: "shadow", + hint: "A dark area or shape produced by an object blocking the light." + }, + { + word: "secret", + hint: "Something kept hidden or unknown to others." + }, + { + word: "curiosity", + hint: "A strong desire to know or learn something." + }, + { + word: "unpredictable", + hint: "Not able to be foreseen or known beforehand; uncertain." + }, + { + word: "obfuscate", + hint: "To confuse or bewilder someone; to make something unclear or difficult to understand." + }, + { + word: "unveil", + hint: "To make known or reveal something previously secret or unknown." + }, + { + word: "illusion", + hint: "A false perception or belief; a deceptive appearance or impression." + }, + { + word: "moonlight", + hint: "The light from the moon." + }, + { + word: "vibrant", + hint: "Full of energy, brightness, and life." + }, + { + word: "nostalgia", + hint: "A sentimental longing or wistful affection for the past." + }, + { + word: "brilliant", + hint: "Exceptionally clever, talented, or impressive." + }, +]; \ No newline at end of file diff --git a/Games/HangMan/style.css b/Games/HangMan/style.css new file mode 100644 index 0000000000..43fb839510 --- /dev/null +++ b/Games/HangMan/style.css @@ -0,0 +1,187 @@ +/* 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; +} +.container { + display: flex; + width: 850px; + gap: 70px; + padding: 60px 40px; + background: #fff; + border-radius: 10px; + align-items: flex-end; + 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; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +.word-display .letter { + width: 28px; + font-size: 2rem; + text-align: center; + font-weight: 600; + margin-bottom: 40px; + 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; + margin-top: 40px; + justify-content: center; +} +:where(.game-modal, .keyboard) button { + color: #fff; + border: none; + outline: none; + cursor: pointer; + font-size: 1rem; + font-weight: 600; + border-radius: 4px; + text-transform: uppercase; + background: #5E63BA; +} +.keyboard button { + padding: 7px; + width: calc(100% / 9 - 5px); +} +.keyboard button[disabled] { + pointer-events: none; + opacity: 0.6; +} +:where(.game-modal, .keyboard) button:hover { + background: #8286c9; +} +.game-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + pointer-events: none; + background: rgba(0,0,0,0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + padding: 0 10px; + transition: opacity 0.4s ease; +} +.game-modal.show { + opacity: 1; + pointer-events: auto; + transition: opacity 0.4s 0.4s ease; +} +.game-modal .content { + padding: 30px; + max-width: 420px; + width: 100%; + border-radius: 10px; + background: #fff; + text-align: center; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); +} +.game-modal img { + max-width: 130px; + margin-bottom: 20px; +} +.game-modal img[src="images/victory.gif"] { + margin-left: -10px; +} +.game-modal h4 { + font-size: 1.53rem; +} +.game-modal p { + font-size: 1.15rem; + margin: 15px 0 30px; + font-weight: 500; +} +.game-modal p b { + color: #5E63BA; + font-weight: 600; +} +.game-modal button { + padding: 12px 23px; +} + +@media (max-width: 782px) { + .container { + flex-direction: column; + padding: 30px 15px; + align-items: center; + } + .hangman-box img { + max-width: 200px; + } + .hangman-box h1 { + display: none; + } + .game-box h4 { + font-size: 1rem; + } + .word-display .letter { + margin-bottom: 35px; + font-size: 1.7rem; + } + .word-display .letter.guessed { + margin: -35px 0 25px; + } + .game-modal img { + max-width: 120px; + } + .game-modal h4 { + font-size: 1.45rem; + } + .game-modal p { + font-size: 1.1rem; + } + .game-modal button { + padding: 10px 18px; + } +} \ No newline at end of file diff --git a/Games/HangMan/styles.css b/Games/HangMan/styles.css deleted file mode 100644 index be29a4c698..0000000000 --- a/Games/HangMan/styles.css +++ /dev/null @@ -1,119 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} -body { - background-color: #34167a; -} -.container { - font-size: 16px; - background-color: #ffffff; - width: 90vw; - max-width: 34em; - position: absolute; - transform: translate(-50%, -50%); - top: 50%; - left: 50%; - padding: 3em; - border-radius: 0.6em; - box-shadow: 0 1.2em 2.4em rgba(111, 85, 0, 0.25); -} -#options-container { - text-align: center; -} -#options-container div { - width: 100%; - display: flex; - justify-content: space-between; - margin: 1.2em 0 2.4em 0; -} -#options-container button { - padding: 0.6em 1.2em; - border: 3px solid #000000; - background-color: #ffffff; - color: #000000; - border-radius: 0.3em; - text-transform: capitalize; - cursor: pointer; -} -#options-container button:disabled { - border: 3px solid #808080; - color: #808080; - background-color: #efefef; -} -#options-container button.active { - background-color: #6e32e8; - border: 3px solid #000000; - color: #fff; -} -.letter-container { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.6em; -} -#letter-container button { - height: 2.4em; - width: 2.4em; - border-radius: 0.3em; - background-color: #ffffff; - cursor: pointer; -} -.new-game-popup { - background-color: #ffffff; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - border-radius: 0.6em; -} - -#user-input-section { - display: flex; - justify-content: center; - font-size: 1.8em; - margin: 0.6em 0 1.2em 0; -} -canvas { - display: block; - margin: auto; - border: 10px solid #064459; - border-radius: 10px; -} -.hide { - display: none; -} -#result-text h2 { - font-size: 1.8em; - text-align: center; -} -#result-text p { - font-size: 1.25em; - margin: 1em 0 2em 0; -} -#result-text span { - font-weight: 600; -} -#new-game-button { - font-size: 1.25em; - padding: 0.5em 1em; - background-color: #340d81; - border: 3px solid #000000; - color: #fff; - border-radius: 0.2em; - cursor: pointer; -} -.win-msg { - color: #350b7d; -} -.lose-msg { - color: #f92b2b; -} \ No newline at end of file diff --git a/assets/images/HangMan.png b/assets/images/HangMan.png index 5390565b8f..1e8d749eaa 100644 Binary files a/assets/images/HangMan.png and b/assets/images/HangMan.png differ diff --git a/assets/images/HangMan.webp b/assets/images/HangMan.webp index f464b54490..b9258445a4 100644 Binary files a/assets/images/HangMan.webp and b/assets/images/HangMan.webp differ