An implementation of a memory card game.
It’s a simple game. Users are given a set of cards containing images/letters/Alphabet which are turned to the back (Hidden). When you click on an image, it reveals the card. If you click on two cards that are exactly the same, that is a win for you.
✔️ Cards have to be shuffled on load or restart.
✔️ Game should know how to handle matched and unmatched cards.
✔️ Game has to start from level 1 which has 4 cards (2 * 2)
✔️ Users will move to the next level after completing the game within the time period & moves (which are specific to the given level)
✔️ Game should display the current number of moves a user has made.
✔️ The game should show a star rating (from 1–10) that reflects the player’s performance based on the number of moves made.
✔️ When a player starts a game, a displayed timer should also start and once the player wins the game, the timer stops.
✔️ A restart button should allow the player to reset the game board, the timer, and the star rating.
✔️ In the middle of the game, if the user closes the browser, the game has to retain the last finished level.
✔️ Game has to track the sequence of the card clicks.
💅 Bootstrap as the design library. 💅 Sass + Utility classes provided by Bootstrap, for styles.
🎴 Flip effect of cards achieved using CSS backface-visibility & transform-style properties
🔄 Game can be resumed even after browser tab is closed.
🚀 Deployed to Vercel
🔥 Smooth animations and transitions. 🔥 Support for ignoring stale/rogue localStorage values (partially). 🔥 Objects whose structure can become potentially nested in the future have been normalized. Read more.
src
├── components
│ ├── Card # Includes implementation of flip effect
│ ├── ControlsBar
│ ├── GameGrid
│ ├── Header
│ ├── HistoryModal
│ ├── StartGameOverlay # The game result (victory/ defeat) is shown here
│ ├── StarRanking
│ └── Timer
├── hooks
│ ├── useCardClickHandler.jsx # Includes methods that handle card click by user
│ ├── useLogEvents.jsx # Includes methods that log game events
│ └── useTrackLevelProgress.jsx # Includes methods and watchers that determine user's progress to next level etc.
├── providers
│ ├── CardsInfoProvider.jsx # Stores information regarding cards, like previously clicked card by user etc.
│ ├── GameInfoProvider.jsx # Stores information related to the game, like level, number of cards in the current level etc.
│ └── StatsProvider.jsx
├── constants
│ ├── levelsConfig.js # Configuration for different levels
│ └── numbers.js
└── ...- Install project dependencies
cd path/to/directory
yarn install
- Start the local server
yarn start