Memento
Memento Game: React.js + Vite.js
This project is a memory-matching game built with React.js and Vite.js. It incorporates audio effects and confetti for a fun user experience.
Features
Memory Matching: Users match pairs of cards with identical images.
Sound Effects: Plays sounds when cards are flipped or matched.
Dynamic Backgrounds: Background gradient changes with each match.
App Badge: Displays the number of wins on supported devices.
Confetti Effect: Confetti animation celebrates successful matches.
Local Storage Support: The number of wins is saved and retrieved on page reload.
Installation
Clone the repository
Navigate to the project directory
Install the dependencies
Run the development server
Build for production
How to Play
Start a new game using the New Game button in the header.
Click on any card to reveal it. If two selected cards match, they will remain visible; otherwise, they will flip back over.
The game continues until all cards are matched.
Wins are tracked and stored locally, and a badge shows the number of wins (if supported by the device).
Key Technologies
React.js: A JavaScript library for building user interfaces.
Vite.js: A fast front-end build tool and development environment.
Hooks: Custom hooks like
useAppBadge to manage application badges, useState and useEffect for state management, and useSound for handling sound effects.Confetti.js: Used to create celebratory confetti animations.
Local Storage: Used to persist the number of wins between sessions.
Code Overview
App Component
The
App component manages the game logic, including:State management
Effects
Utilities
shuffle.js: A utility function to shuffle the cards for each new game.Components
Card Component: Renders individual cards and handles click events.
Header Component: Displays the number of wins and provides the "New Game" button.
Hooks
useAppBadge: A custom hook to handle the setting and clearing of app badges.
Sound Effects
The project includes two sound effects:
card.mp3: Plays when a card is flipped.cardMatch.mp3: Plays when two cards are successfully matched.Confetti
Confetti animation is triggered whenever a pair of cards is matched. This adds a celebratory effect to the game.
Background Gradients
The game features dynamic background gradients that change each time a match is found. Gradients are randomly shuffled from a predefined list.
Future Improvements
Add more card decks/themes.
Add difficulty levels (varying grid sizes).
Implement multiplayer mode.
Like this project
0
Posted Dec 10, 2024
This project is a memory matching game built with React.js and Vite.js, incorporating audio effects and confetti for a fun user experience.
Fullstack Notion Clone
Open Banking