Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

number catcher game added #5139

Merged
merged 4 commits into from
Aug 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions Games/Number_Catcher_Game/README.md
Original file line number Diff line number Diff line change
@@ -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!**
17 changes: 17 additions & 0 deletions Games/Number_Catcher_Game/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Catcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="target-color">Color: #FFFFFF</div>
<div id="falling-colors"></div>
<div id="score">Score: 0</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
70 changes: 70 additions & 0 deletions Games/Number_Catcher_Game/scripts.js
Original file line number Diff line number Diff line change
@@ -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);
49 changes: 49 additions & 0 deletions Games/Number_Catcher_Game/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)|
Expand Down
Binary file added assets/images/Number_Catcher_Game.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading