This is a memory game built using React, where players flip pairs of cards to find matches. The game keeps track of the number of clicks and time spent, offering a fun and engaging way to exercise memory. The game features dynamic card shuffling, timer functionality, and popup notifications upon completion.
- React Functional Components: Built using React with hooks like
useStateto manage state and effects. - Card Component: The individual cards are rendered using a custom
Cardcomponent, which handles user interactions. - Timer: The game tracks the elapsed time and displays it to the user.
- Popup Notifications: When the game is completed, a popup shows the final results, including the number of clicks and the total time spent.
- React: Core library used for building the user interface.
- CSS: Custom styles defined to provide visual appeal.
reactjs-popup: A lightweight library used for creating popup modals in React.
- Card Preparation: Cards are duplicated and shuffled to create pairs for gameplay.
- Gameplay: Players flip cards by clicking on them. The game tracks clicks and checks for matching pairs.
- Timer: The timer starts when the first card is flipped and stops when all pairs are matched.
- Popup: Upon completing the game, a popup displays the total clicks and time taken to finish the game.