# Color Heroes Game 🎮
Welcome to **Color Heroes**, a fun and interactive color-matching game built using React! Your goal is to guess the target color from a set of options. Each correct guess earns points, but each incorrect guess costs you a heart. Lose all hearts, and the game is over! 🎉
## Features
- 🎨 **Color Matching**: Match the target color from a set of 6 color options.
- 💖 **Hearts System**: You have 3 hearts, which decrease with incorrect guesses.
- 🏆 **Score Tracking**: Your score is displayed, and you aim to get the highest score possible.
- 🎉 **Celebration Effects**: Enjoy fun animations, such as confetti and celebrations, when you win or make a correct guess!
- 😞 **Game Over**: If you lose all your hearts, the game ends and displays your final score.
## Installation
To run this project locally, follow these steps:
### Prerequisites
Make sure you have [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) installed on your machine.
### Steps
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/color-heroes.git-
Navigate to the project directory:
cd color-heroes -
Install the dependencies:
npm install
-
Run the development server:
npm start
This will start the app on http://localhost:3000.
- Click on the "Start New Game" button to begin.
- A target color will appear, and you need to choose the matching color from the options.
- Each correct guess increases your score and adds to your correct guesses tally.
- Each incorrect guess will cause you to lose one heart.
- The game ends when you lose all hearts or choose to reset the game.
- At the end of the game, you'll see a smiley face based on your score and a fun confetti animation if you lost all hearts.
- React: A JavaScript library for building user interfaces.
- CSS: For styling the game and implementing animations.
- React Confetti: A library to display confetti animations upon game completion.
/color-heroes
/public
index.html
/src
App.js # Main game logic and UI
App.css # Styles for the game
index.js # Entry point for the React app
package.json # Project dependencies and scripts
README.md # This file
If you would like to contribute to this project, feel free to fork the repository, make changes, and submit a pull request. We welcome any improvements, suggestions, or bug fixes!
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature). - Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature/your-feature). - Create a new Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Thank you for playing Color Heroes! Have fun and may the best color matcher win! 🎮✨
### Notes:
1. **Installation**: Provides clear instructions on how to clone the repo, install dependencies, and run the game.
2. **Game Instructions**: Describes the gameplay mechanics.
3. **Technologies**: Lists the tech stack used in the project.
4. **Project Structure**: Shows the folder structure so users can easily navigate the files.
5. **Contributing**: Instructions for others to contribute to the project.
6. **License**: Provides a license section to clarify usage rights.
You can modify this README as needed, adding more details such as credits or additional information on customization if required!