diff --git a/Games/Am_I_the_number/README.md b/Games/Am_I_the_number/README.md new file mode 100644 index 0000000000..ea438575c0 --- /dev/null +++ b/Games/Am_I_the_number/README.md @@ -0,0 +1,22 @@ +# **AM I the number** + +--- + +
+ +## **Description 📃** +- think of a number and match if the number you thought of matches the number to be guessed under 10 tries. + + +## **How to play? 🕹ī¸** +- enter a number in the guess field and press submit to check whether the number you thought of matches the number. + + +
+ + +
+ + + +
diff --git a/Games/Am_I_the_number/index.html b/Games/Am_I_the_number/index.html new file mode 100644 index 0000000000..fe4f530726 --- /dev/null +++ b/Games/Am_I_the_number/index.html @@ -0,0 +1,29 @@ + + + + + + Am I the number? + + + + +
+

Number guessing game

+

Try and guess a random number between 1 to 100

+

You have 10 attempts to get it correct

+
+
+ Think of a number + + + +
+

Previous guesses:

+

Guesses remaining: 10

+

+
+
+ + + diff --git a/Games/Am_I_the_number/script.js b/Games/Am_I_the_number/script.js new file mode 100644 index 0000000000..e7430dcaaf --- /dev/null +++ b/Games/Am_I_the_number/script.js @@ -0,0 +1,97 @@ +document.addEventListener('DOMContentLoaded', function () { + let randomNumber = parseInt(Math.random() * 100 + 1); + + const submit = document.querySelector('#subt'); + const userInput = document.querySelector('#guessField'); + const guessSlot = document.querySelector('.guesses'); + const remaining = document.querySelector('.lastResult'); + const lowOrHi = document.querySelector('.lowOrHi'); + const startOver = document.querySelector('.resultParas'); + + const p = document.createElement('p'); + + let prevGuess = []; + let numGuess = 1; + + let playGame = true; + + if (playGame) { + submit.addEventListener('click', function (e) { + e.preventDefault(); + const guess = parseInt(userInput.value); + console.log(guess); + validateGuess(guess); + }); + } + + function validateGuess(guess) { + if (isNaN(guess)) { + alert('Please enter a valid number'); + } else if (guess < 1) { + alert('Please enter a number more than 1'); + } else if (guess > 100) { + alert('Please enter a number less than 100'); + } else { + prevGuess.push(guess); + if (numGuess === 10) { + displayGuess(guess); + displayMessage(`Game Over. Random number was ${randomNumber}`); + endGame(); + } else { + displayGuess(guess); + checkGuess(guess); + } + } + } + + function checkGuess(guess) { + if (guess === randomNumber) { + displayMessage(`You guessed it right`); + endGame(); + } else if (guess < randomNumber) { + displayMessage(`Number is TOO low`); + } else if (guess > randomNumber) { + displayMessage(`Number is TOO high`); + } + } + + function displayGuess(guess) { + userInput.value = ''; + guessSlot.innerHTML += `${guess}, `; + numGuess++; + remaining.innerHTML = `${11 - numGuess}`; + } + + function displayMessage(message) { + lowOrHi.innerHTML = `

${message}

`; + } + + function endGame() { + userInput.value = ''; + userInput.setAttribute('disabled', ''); + if (!document.querySelector('#newGame')) { + p.classList.add('button'); + p.innerHTML = `

Start new Game

`; + startOver.appendChild(p); + } + playGame = false; + newGame(); + } + + function newGame() { + const newGameButton = document.querySelector('#newGame'); + newGameButton.addEventListener('click', function (e) { + randomNumber = parseInt(Math.random() * 100 + 1); + prevGuess = []; + numGuess = 1; + guessSlot.innerHTML = ''; + remaining.innerHTML = `${11 - numGuess}`; + userInput.removeAttribute('disabled'); + lowOrHi.innerHTML = ''; + startOver.removeChild(p); + + playGame = true; + }); + } + }); + \ No newline at end of file diff --git a/Games/Am_I_the_number/style.css b/Games/Am_I_the_number/style.css new file mode 100644 index 0000000000..88b205f721 --- /dev/null +++ b/Games/Am_I_the_number/style.css @@ -0,0 +1,77 @@ +.body { + font-family: Arial, sans-serif; + background-color: #cff6f9; + display: flex; + justify-content: center; + align-items: center; + height: 600vh; + margin: 0; +} +#wrapper { + background-color: #d4f0fb; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: 35%; + box-sizing: border-box; + margin-left: 32%; + margin-top: 10%; + margin-right:35%; +} +h1 { + color: #333; + margin-bottom: 10px; +} +p { + color: #666; + margin: 10px 0; +} +.form { + display: flex; + flex-direction: column; + align-items: center; +} +label { + margin-bottom: 10px; +} +.guessField { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin-top:10px; + margin-bottom: 10px; + width: 80%; + box-sizing: border-box; +} +.guessSubmit { + padding: 10px 20px; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + cursor: pointer; +} +.guessSubmit:hover { + background-color: #0056b3; +} +.resultParas { + margin-top: 20px; +} +.resultParas p { + margin: 5px 0; +} +.lowOrHi h2 { + color: #ff0000; +} +.button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + margin-top: 20px; +} +.button:hover { + background-color: #0056b3; +} \ No newline at end of file diff --git a/Games/Find_The_Missing_Letter/README.md b/Games/Find_The_Missing_Letter/README.md new file mode 100644 index 0000000000..22124362bf --- /dev/null +++ b/Games/Find_The_Missing_Letter/README.md @@ -0,0 +1,21 @@ +# Find the Missing Letter Game + +## Overview +"Find the Missing Letter" is a simple educational game where players need to guess the missing letter in a word. It is designed to help with letter recognition and spelling practice. + +## How to Play +1. A word will be displayed with one letter missing. +2. Guess the missing letter by typing it into the input box. +3. Click "Submit" to check if your guess is correct. +4. If the guess is correct, the missing letter will be filled in; otherwise, you can try again. + +## Files +- `index.html`: The HTML structure of the game. +- `styles.css`: The CSS styles for the game. +- `scripts.js`: The JavaScript logic for the game. + +## Installation +1. Clone or download the repository. +2. Open `index.html` in a web browser to play the game. + + diff --git a/Games/Find_The_Missing_Letter/index.html b/Games/Find_The_Missing_Letter/index.html new file mode 100644 index 0000000000..553034f65a --- /dev/null +++ b/Games/Find_The_Missing_Letter/index.html @@ -0,0 +1,20 @@ + + + + + + Find the Missing Letter + + + +
+
Find the Missing Letter
+
Score: 0
+
_ _ _ _ _
+ + +
+
+ + + diff --git a/Games/Find_The_Missing_Letter/script.js b/Games/Find_The_Missing_Letter/script.js new file mode 100644 index 0000000000..81aa21537a --- /dev/null +++ b/Games/Find_The_Missing_Letter/script.js @@ -0,0 +1,66 @@ +document.addEventListener('DOMContentLoaded', () => { + const wordElement = document.getElementById('word'); + const guessInput = document.getElementById('guess'); + const submitButton = document.getElementById('submit'); + const messageElement = document.getElementById('message'); + const scoreElement = document.getElementById('score'); + + // List of coding-related words + const words = [ + 'algorithm', 'debugging', 'compiler', 'syntax', 'variable', + 'function', 'iterator', 'object', 'inheritance', 'polymorphism', + 'repository', 'framework', 'exception', 'module', 'interface', + 'refactoring', 'dependency', 'frontend', 'backend' + ]; + + let correctWord; + let missingIndex; + let displayedWord; + let score = 0; + + function getRandomWord() { + const randomIndex = Math.floor(Math.random() * words.length); + return words[randomIndex]; + } + + function startGame() { + correctWord = getRandomWord(); + missingIndex = Math.floor(Math.random() * correctWord.length); + displayedWord = correctWord.split(''); + displayedWord[missingIndex] = '_'; + wordElement.textContent = displayedWord.join(''); + messageElement.textContent = ''; // Clear previous messages + messageElement.classList.remove('correct', 'incorrect'); // Remove previous classes + document.body.classList.remove('bg-correct', 'bg-incorrect'); // Reset background color + } + + function updateScore(points) { + score += points; + scoreElement.textContent = `Score: ${score}`; + } + + function handleGuess() { + const guessedLetter = guessInput.value.toLowerCase(); + if (guessedLetter === correctWord[missingIndex]) { + displayedWord[missingIndex] = guessedLetter; + wordElement.textContent = displayedWord.join(''); + messageElement.textContent = 'Correct!'; + messageElement.classList.add('correct'); // Add correct class + document.body.classList.add('bg-correct'); // Apply light green background + updateScore(20); // Add 20 points for a correct answer + setTimeout(() => { + startGame(); // Restart the game after 1 second + }, 1000); // 1 second delay before starting a new game + } else { + messageElement.textContent = 'Incorrect, try again!'; + messageElement.classList.add('incorrect'); // Add incorrect class + document.body.classList.add('bg-incorrect'); // Apply light red background + updateScore(-10); // Subtract 10 points for a wrong answer + } + guessInput.value = ''; + } + + startGame(); + + submitButton.addEventListener('click', handleGuess); +}); diff --git a/Games/Find_The_Missing_Letter/style.css b/Games/Find_The_Missing_Letter/style.css new file mode 100644 index 0000000000..a701b77563 --- /dev/null +++ b/Games/Find_The_Missing_Letter/style.css @@ -0,0 +1,103 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #ffeb3b, #ff5722); /* Initial bright gradient background */ + margin: 0; + transition: background-color 0.5s ease; /* Smooth transition for background color change */ +} + +.game-container { + text-align: center; + background-color: #ffffff; /* White background for the game area */ + padding: 20px; + border-radius: 15px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* More prominent shadow */ + animation: bounce 1s ease infinite; /* Bounce animation effect */ +} + +.game-title { + font-size: 2.5em; + font-weight: bold; + color: #e91e63; /* Bright pink color for the title */ + margin-bottom: 20px; + text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Enhanced shadow effect */ +} + +.word { + font-size: 2em; + margin-bottom: 20px; + color: #4caf50; /* Bright green color for the word */ +} + +.input { + font-size: 1.5em; + padding: 10px; + margin: 10px; + border: 2px solid #2196f3; /* Bright blue border for the input */ + border-radius: 5px; + outline: none; + transition: border-color 0.3s ease; +} + +.input:focus { + border-color: #0d47a1; /* Darker blue for focus state */ +} + +.button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + background-color: #ff5722; /* Bright orange background for the button */ + color: #ffffff; /* White text */ + border: none; + border-radius: 5px; + transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth color transition and scale effect */ +} + +.button:hover { + background-color: #d84315; /* Darker orange on hover */ + transform: scale(1.05); /* Slightly enlarge the button on hover */ +} + +#message { + font-size: 1.2em; + margin-top: 20px; +} + +#message.correct { + color: #4caf50; /* Bright green color for correct messages */ +} + +#message.incorrect { + color: #f44336; /* Bright red color for incorrect messages */ +} + +.score { + font-size: 1.5em; + margin-bottom: 20px; + color: #2196f3; /* Bright blue color for the score */ +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-10px); + } + 60% { + transform: translateY(-5px); + } +} + +/* Classes for background color changes */ +.bg-correct { + background-color: #a5d6a7; /* Light green background for correct answer */ +} + +.bg-incorrect { + background-color: #ffcdd2; /* Light red background for incorrect answer */ +} diff --git a/README.md b/README.md index de308475df..56471418d3 100644 --- a/README.md +++ b/README.md @@ -359,7 +359,11 @@ This repository also provides one such platforms where contributers come over an | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) | | [Airhockey_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_Game) | + +| [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number) | + |[Gem_Cruncher](https://github.com/kunjgit/GameZone/tree/main/Games/Gem_Cruncher)| +
@@ -1702,9 +1706,14 @@ This repository also provides one such platforms where contributers come over an |[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)| |[Sentence_Scramble](https://github.com/kunjgit/GameZone/tree/main/Games/Sentence_Scramble)| |[Quiz_With_Timer](https://github.com/kunjgit/GameZone/tree/main/Games/Quiz_With_Timer)| +|[Find_The_Missing_Letter](https://github.com/kunjgit/GameZone/tree/main/Games/Find_The_Missing_Letter)| + + | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)| |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)| +|[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)| + |[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)| |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)| diff --git a/assets/images/Find_The_Missing_Letter.png b/assets/images/Find_The_Missing_Letter.png new file mode 100644 index 0000000000..dc3801ee21 Binary files /dev/null and b/assets/images/Find_The_Missing_Letter.png differ diff --git a/assets/images/amithenumber.png b/assets/images/amithenumber.png new file mode 100644 index 0000000000..8b697febe8 Binary files /dev/null and b/assets/images/amithenumber.png differ