Raindrop Catcher

A delightful and engaging browser game built with React where players control a bucket to catch falling raindrops. Test your reflexes and aim for the highest score in this time-based challenge!

Features

• Real-time raindrop catching gameplay
• Time-based challenges
• Score tracking system
• Smooth keyboard controls
• Responsive design for all devices
• Beautiful animations using Framer Motion
• Simple and intuitive interface

Known Issue

Issue: The score is not updating properly when catching raindrops.

Possible Causes

• Collision detection might not be triggering correctly.
• State updates could be asynchronous, causing a delay in updating the score.
• Bucket position calculations may not be accurately detecting collisions.

Technology Stack

• React 18
• Framer Motion
• Tailwind CSS
• JavaScript (ES6+)

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository bash git clone https://github.com/yourusername/raindrop-catcher.git

2. Navigate to the project directory bash cd raindrop-catcher

3. Install dependencies bash npm install or yarn install

4. Start the development server bash npm run dev or yarn run dev

5. Open your browser and visit http://localhost:5173/

How to Play

1. Click the "Start Game" button to begin
2. Use the left (←) and right (→) arrow keys to move the bucket
3. Catch as many raindrops as possible before the timer runs out
4. Each caught raindrop adds to your score
5. Try to beat your high score!

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and structure
• Write meaningful commit messages
• Update documentation for significant changes
• Add comments for complex logic
• Test your changes thoroughly before submitting a PR

Feature Requests

Have ideas for new features? We'd love to hear them! Please open an issue and:

1. Describe the feature in detail
2. Explain why it would be useful
3. Suggest how it could be implemented
4. Include mockups if possible

License

Distributed under the MIT LICENCE.

Acknowledgments

• React team for the amazing framework
• Framer Motion for smooth animations
• Tailwind CSS for the styling system
• All our contributors and supporters

---

Made with ♥ by [Akshi Jain]