Memory Cards.
ROLE:- designer|
- coder
For the creation of this game I used React Components and Redux (+Redux Thunk) for global state management. I also chose to use SCSS modules to keep the styles encapsulated. The images are being fetched from picsum.photos. The project is deployed to Firebase as I also used their Realtime Database for the storage of the world records.
- JavaScript|
- React|
- HTML5|
- SCSS modules|
- Firebase Realtime db|
- Figma
1
At first the player can change the mode of difficulty. His choice is saved in the localStorage so it’s persistent. Then all they have to do is to hit the START button and the game is on.
2
All the cards are flipped, and the timer starts (implemented as a custom React hook). The player must find and memorize as many pair images as possible. After time passes the cards are flipped back and the stopwatch starts ticking.
3
For every correct pair a green border around the cards appears, while for every wrong one a red border appears. Every mistake matters for the final score.
4
When the game is over the score is revealed and a chance for another round with a new set of random images is given.
5
In case the player makes a new world record a form will appear for submitting their name for a place in the patheon. The data are posted with AXIOS to the Firebase database.
6
In the 2nd tab of the collapsible sidebar the player can find the ranking of the top 8 world records (fetched and filtered from the Firebase db), along with their high score (saved in localSorage).