diff --git a/Games/Number_Catcher_Game/README.md b/Games/Number_Catcher_Game/README.md new file mode 100644 index 0000000000..5d94fe8d8b --- /dev/null +++ b/Games/Number_Catcher_Game/README.md @@ -0,0 +1,29 @@ +# Number Catcher + +**Number Catcher** is a simple and fun browser game where you catch falling numbers with the goal of matching them to a target number. The game features colorful falling numbers, a scoring system, and a countdown timer to make it engaging. + + + +## Game Overview + +In **Number Catcher**, numbers fall from the top of the screen at random positions. Your goal is to click on the numbers that match a target number displayed at the top of the screen. Each correct click increases your score. The game features colorful numbers and a simple user interface. + +## Features + +- **Colorful Numbers**: Each falling number has a unique color. +- **Score Tracking**: Your score increases each time you click on the correct number. +- **Random Falling Numbers**: Numbers fall from random positions on the screen. +- **Target Number Display**: The current target number is shown at the top. + + + +## How to Play + +1. **Start the Game:** Open the `index.html` file in your browser. +2. **Catch Falling Numbers:** Click on the falling numbers that match the target number displayed at the top of the screen. +3. **Increase Your Score:** Each correct click adds 10 points to your score. +4. **Keep Playing:** Numbers will continue to fall, and your goal is to keep catching the right ones to get a high score. + + + +**Enjoy playing Number Catcher!** diff --git a/Games/Number_Catcher_Game/index.html b/Games/Number_Catcher_Game/index.html new file mode 100644 index 0000000000..d3a97f8bff --- /dev/null +++ b/Games/Number_Catcher_Game/index.html @@ -0,0 +1,17 @@ + + + + + + Color Catcher + + + +
+
Color: #FFFFFF
+
+
Score: 0
+
+ + + diff --git a/Games/Number_Catcher_Game/scripts.js b/Games/Number_Catcher_Game/scripts.js new file mode 100644 index 0000000000..2674290f59 --- /dev/null +++ b/Games/Number_Catcher_Game/scripts.js @@ -0,0 +1,70 @@ +const targetNumberElement = document.getElementById('target-color'); +const fallingNumbersContainer = document.getElementById('falling-colors'); +const scoreDisplay = document.getElementById('score'); +let score = 0; + +// List of colors +const colors = [ + 'Red', 'Green', 'Blue', 'Yellow', 'Cyan', 'Magenta', 'Orange', 'Purple', 'Pink', 'Brown' +]; + +// Generate a random number +function getRandomNumber() { + return Math.floor(Math.random() * 10); // Numbers from 0 to 9 +} + +// Generate a random color from the colors array +function getRandomColor() { + return colors[Math.floor(Math.random() * colors.length)]; +} + +// Update the target number +function updateTargetNumber() { + const number = getRandomNumber(); + targetNumberElement.textContent = `Number: ${number}`; + // targetNumberElement.style.color = getRandomColor(); // Set target color + return number; +} + +let targetNumber = updateTargetNumber(); + +// Create a falling number +function createFallingNumber() { + const number = getRandomNumber(); + const color = getRandomColor(); // Get a random color for each falling number + const div = document.createElement('div'); + div.className = 'falling-color'; + div.textContent = number; + div.style.backgroundColor = color; // Set the background color + div.style.color = '#fff'; // Text color for visibility + div.style.fontSize = '24px'; + div.style.textAlign = 'center'; + div.style.lineHeight = '50px'; // Center text vertically + div.style.left = Math.random() * (fallingNumbersContainer.offsetWidth - 50) + 'px'; + fallingNumbersContainer.appendChild(div); + + let fallSpeed = Math.random() * 2 + 1; + + function fall() { + const top = parseFloat(div.style.top || 0); + if (top < fallingNumbersContainer.offsetHeight - 50) { + div.style.top = top + fallSpeed + 'px'; + requestAnimationFrame(fall); + } else { + fallingNumbersContainer.removeChild(div); + } + } + + fall(); + + div.addEventListener('click', () => { + if (parseInt(div.textContent) === targetNumber) { + score += 10; + scoreDisplay.textContent = `Score: ${score}`; + targetNumber = updateTargetNumber(); + } + fallingNumbersContainer.removeChild(div); + }); +} + +setInterval(createFallingNumber, 1000); diff --git a/Games/Number_Catcher_Game/styles.css b/Games/Number_Catcher_Game/styles.css new file mode 100644 index 0000000000..cec0e50992 --- /dev/null +++ b/Games/Number_Catcher_Game/styles.css @@ -0,0 +1,49 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #FFDAB9; +} + +#game-container { + position: relative; + width: 400px; + height: 600px; + border: 2px solid #000; + overflow: hidden; + background-color: #fff; +} + +#target-color { + position: absolute; + top: 10px; + left: 10px; + font-size: 18px; + font-weight: bold; +} + +#falling-colors { + position: relative; + height: 100%; +} + +.falling-color { + position: absolute; + width: 50px; + height: 50px; + cursor: pointer; + border: 1px solid #000; + box-sizing: border-box; +} + +#score { + position: absolute; + bottom: 10px; + left: 10px; + font-size: 18px; + font-weight: bold; +} diff --git a/README.md b/README.md index 01c8e88b6a..8352fbff94 100644 --- a/README.md +++ b/README.md @@ -1690,7 +1690,11 @@ 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)| + +| [Number_Catcher_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Catcher_Game)| + |[Infinite_Cars](https://github.com/kunjgit/GameZone/tree/main/Games/Infinite_Cars)| + |[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)| diff --git a/assets/images/Number_Catcher_Game.png b/assets/images/Number_Catcher_Game.png new file mode 100644 index 0000000000..46eb0a443c Binary files /dev/null and b/assets/images/Number_Catcher_Game.png differ