Memory Game
A simple, accessible and responsive memory matching game with time tracker, flipping cards, and match animations. Built with vanilla JavaScript to practice DOM manipulation and game logic.
Features
- Card flip animations with CSS transitions
- Real-time timer and move counter
- Match detection and validation
- Win condition with victory modal
- Responsive grid layout
- Restart game functionality
Development Specs
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Features: DOM Manipulation, Event Handling
- Design: Responsive Grid, Flexbox
- Performance: Optimized animations
- Accessibility: Semantic HTML, ARIA labels
- Hosted on GitHub Pages with global CDN and automatic SSL
Desktop View
The Challenge
The main challenge of this project was implementing a robust card-matching system that could handle various interaction edge cases. I needed to prevent users from flipping more than two cards at once, ensure smooth animations, and keep the game state consistent across interactions. I solved this by designing a clear state management structure within the MemoryGame class, using logical locks and card state flags.
The timer feature also required careful handling: it updates in real time and automatically pauses during animations, ensuring accurate timing without performance issues or memory leaks.
For card randomization, I used a simple array shuffle based on Math.random(), which provides enough variety for casual play. Accessibility was another key focus — each card is keyboard-navigable and can be flipped using the Enter or Space keys, making the game enjoyable for all players.
Responsive Design
The application adapts seamlessly across all devices
