diff --git a/Games/Word_Guessing/README.md b/Games/Word_Guessing/README.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/Games/Word_Guessing/assets/images/Word_Guessing.PNG b/Games/Word_Guessing/assets/images/Word_Guessing.PNG new file mode 100644 index 0000000000..39efc9e22d Binary files /dev/null and b/Games/Word_Guessing/assets/images/Word_Guessing.PNG differ diff --git a/Games/Word_Guessing/index.html b/Games/Word_Guessing/index.html new file mode 100644 index 0000000000..6421a67b6c --- /dev/null +++ b/Games/Word_Guessing/index.html @@ -0,0 +1,28 @@ + + + + + Guessing Word + + + + +
+

Guess the Word

+
+ +
+
+

Hint:

+

Remaining guesses:

+

Wrong letters:

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Games/Word_Guessing/script.js b/Games/Word_Guessing/script.js new file mode 100644 index 0000000000..88836178e8 --- /dev/null +++ b/Games/Word_Guessing/script.js @@ -0,0 +1,62 @@ +const inputs = document.querySelector(".inputs"), +hintTag = document.querySelector(".hint span"), +guessLeft = document.querySelector(".guess-left span"), +wrongLetter = document.querySelector(".wrong-letter span"), +resetBtn = document.querySelector(".reset-btn"), +typingInput = document.querySelector(".typing-input"); + +let word, maxGuesses, incorrectLetters = [], correctLetters = []; + +function randomWord() { + let ranItem = wordList[Math.floor(Math.random() * wordList.length)]; + word = ranItem.word; + maxGuesses = word.length >= 5 ? 8 : 6; + correctLetters = []; incorrectLetters = []; + hintTag.innerText = ranItem.hint; + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + + let html = ""; + for (let i = 0; i < word.length; i++) { + html += ``; + inputs.innerHTML = html; + } +} +randomWord(); + +function initGame(e) { + let key = e.target.value.toLowerCase(); + if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) { + if(word.includes(key)) { + for (let i = 0; i < word.length; i++) { + if(word[i] == key) { + correctLetters += key; + inputs.querySelectorAll("input")[i].value = key; + } + } + } else { + maxGuesses--; + incorrectLetters.push(` ${key}`); + } + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + } + typingInput.value = ""; + + setTimeout(() => { + if(correctLetters.length === word.length) { + alert(`Congratulations! You got the word ${word.toUpperCase()}`); + return randomWord(); + } else if(maxGuesses < 1) { + alert("You don't have remaining guesses!"); + for(let i = 0; i < word.length; i++) { + inputs.querySelectorAll("input")[i].value = word[i]; + } + } + }, 100); +} + +resetBtn.addEventListener("click", randomWord); +typingInput.addEventListener("input", initGame); +inputs.addEventListener("click", () => typingInput.focus()); +document.addEventListener("keydown", () => typingInput.focus()); \ No newline at end of file diff --git a/Games/Word_Guessing/style.css b/Games/Word_Guessing/style.css new file mode 100644 index 0000000000..5c4d8a4628 --- /dev/null +++ b/Games/Word_Guessing/style.css @@ -0,0 +1,108 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + padding: 0 10px; + min-height: 100vh; + align-items: center; + justify-content: center; + background: #ececec; +} +.wrapper{ + width: 430px; + background: #fff; + border-radius: 10px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); +} +.wrapper h1{ + font-size: 25px; + font-weight: 500; + padding: 20px 25px; + border-bottom: 1px solid #ccc; + text-align: center; +} +.wrapper .content{ + margin: 25px 25px 35px; +} +.content .inputs{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.inputs input{ + height: 57px; + width: 56px; + margin: 4px; + font-size: 24px; + font-weight: 500; + color: #8d1ba9; + text-align: center; + border-radius: 5px; + background: none; + pointer-events: none; + text-transform: uppercase; + border: 1px solid #B5B5B5; +} +.typing-input { + opacity: 1; + z-index: -999; + position: absolute; + pointer-events: none; +} +.inputs input:first-child{ + margin-left: 0px; +} +.content .details{ + margin: 20px 0 25px; +} +.details p{ + font-size: 19px; + margin-bottom: 10px; +} +.content .reset-btn{ + width: 100%; + border: none; + cursor: pointer; + color: #fff; + outline: none; + padding: 15px 0; + font-size: 17px; + border-radius: 5px; + background: #03201a; + transition: all 0.3s ease; +} +.content .reset-btn:hover{ + background: #18a589; +} + +@media screen and (max-width: 460px) { + .wrapper { + width: 100%; + } + .wrapper h1{ + font-size: 22px; + padding: 16px 20px; + } + .wrapper .content{ + margin: 25px 20px 35px; + } + .inputs input{ + height: 51px; + width: 50px; + margin: 3px; + font-size: 22px; + } + .details p{ + font-size: 17px; + } + .content .reset-btn{ + padding: 14px 0; + font-size: 16px; + } +} \ No newline at end of file diff --git a/Games/Word_Guessing/words.js b/Games/Word_Guessing/words.js new file mode 100644 index 0000000000..e8806958b0 --- /dev/null +++ b/Games/Word_Guessing/words.js @@ -0,0 +1,194 @@ +let wordList = [ + { + word: "banana", + hint: "a tropical fruit" + }, + { + word: "giraffe", + hint: "a tall African animal" + }, + { + word: "book", + hint: "a written work" + }, + { + word: "moon", + hint: "Earth's natural satellite" + }, + { + word: "diamond", + hint: "a precious gemstone" + }, + { + word: "camera", + hint: "device for taking photos" + }, + { + word: "piano", + hint: "a musical instrument" + }, + { + word: "painting", + hint: "artistic creation on canvas" + }, + { + word: "ocean", + hint: "vast body of saltwater" + }, + { + word: "butterfly", + hint: "colorful flying insect" + }, + { + word: "rainbow", + hint: "colorful meteorological phenomenon" + }, + { + word: "computer", + hint: "electronic device for processing data" + }, + { + word: "mountain", + hint: "elevated landform" + }, + { + word: "beach", + hint: "sandy shore by the sea" + }, + { + word: "football", + hint: "popular team sport" + }, + { + word: "paintbrush", + hint: "tool for applying paint" + }, + { + word: "bicycle", + hint: "two-wheeled transportation" + }, + { + word: "telephone", + hint: "communication device" + }, + { + word: "chocolate", + hint: "sweet confectionery" + }, + { + word: "sunset", + hint: "evening natural event" + }, + { + word: "garden", + hint: "cultivated outdoor space" + }, + { + word: "internet", + hint: "global computer network" + }, + { + word: "music", + hint: "art form of sound" + }, + { + word: "fireplace", + hint: "hearth for a fire indoors" + }, + { + word: "ballet", + hint: "elegant dance form" + }, + { + word: "coffee", + hint: "caffeinated beverage" + }, + { + word: "jungle", + hint: "dense tropical forest" + }, + { + word: "whale", + hint: "gigantic marine mammal" + }, + { + word: "safari", + hint: "wildlife adventure trip" + }, + { + word: "bracelet", + hint: "ornamental wrist accessory" + }, + { + word: "volcano", + hint: "mountain with eruptive potential" + }, + { + word: "sunglasses", + hint: "eye protection from sun" + }, + { + word: "adventure", + hint: "exciting journey or experience" + }, + { + word: "globe", + hint: "model of the Earth" + }, + { + word: "sunflower", + hint: "bright yellow flowering plant" + }, + { + word: "breeze", + hint: "gentle wind" + }, + { + word: "passport", + hint: "travel identification document" + }, + { + word: "candle", + hint: "wax with a wick for lighting" + }, + { + word: "fireworks", + hint: "pyrotechnic display" + }, + { + word: "skyscraper", + hint: "tall urban building" + }, + { + word: "dictionary", + hint: "language reference book" + }, + { + word: "fountain", + hint: "water feature in a garden" + }, + { + word: "tiger", + hint: "large striped carnivore" + }, + { + word: "violin", + hint: "musical string instrument" + }, + { + word: "umbrella", + hint: "rain protection device" + }, + { + word: "flower", + hint: "blossoming plant" + }, + { + word: "strawberry", + hint: "sweet red fruit" + }, + { + word: "oxygen", + hint: "essential gas for life" + }, +];