Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

# 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
  1. Navigate to the project directory:

    cd color-heroes
  2. Install the dependencies:

    npm install
  3. Run the development server:

    npm start

    This will start the app on http://localhost:3000.

How to Play

  1. Click on the "Start New Game" button to begin.
  2. A target color will appear, and you need to choose the matching color from the options.
  3. Each correct guess increases your score and adds to your correct guesses tally.
  4. Each incorrect guess will cause you to lose one heart.
  5. The game ends when you lose all hearts or choose to reset the game.
  6. 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.

Technologies Used

  • 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.

Project Structure

/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

Contributing

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!

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature).
  3. Commit your changes (git commit -am 'Add new feature').
  4. Push to the branch (git push origin feature/your-feature).
  5. Create a new Pull Request.

License

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!

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages