Color Memory Game - Hex Color Matching Challenge

Description:

This interactive memory game challenges players to match pairs of hex color codes through an engaging card-flipping mechanic. Built with vanilla JavaScript, it demonstrates dynamic DOM manipulation, state management with Map data structures, and responsive UI design for a polished gaming experience. Unlike simple matching games, this implementation features automated dark color generation, move tracking, match counting, and win detection - delivering a complete cognitive training tool with smooth animations and immediate visual feedback. The game showcases event handling, card shuffling algorithms, timing controls, and SCSS-powered animations - essential capabilities for building interactive web games that require responsive feedback and engaging user experiences.

The Challenge:

Many memory games use static images or predefined content. I wanted to create a dynamic, replayable memory game that generates unique color combinations for each session, providing endless variety while maintaining clean, responsive design and smooth animations.

Development Story:

This project required careful management of game state and user interactions to prevent cheating and ensure smooth gameplay. The most challenging aspect was implementing the card flip logic with proper timing controls - ensuring cards stay flipped only when matched, and flip back with the correct delay when mismatched.

Key Challenge: Creating a seamless memory game experience with randomized color generation, robust state management using Maps, and smooth CSS transitions that provide clear visual feedback for every user action.

Technologies Used:

• HTML5 - Semantic markup with accessible card grid layout
• CSS3/SCSS - Custom styling with smooth flip animations and responsive design
• JavaScript (ES6+) - Game logic with Map data structure, shuffling algorithms, and event handling
• CSS Animations - 3D card flips and transition effects
• No External Dependencies - Pure vanilla JavaScript implementation

Technical Architecture:

• Map Data Structure - Efficient card state management with unique IDs
• Game State Management - Tracks moves, matches, flipped cards, and game completion
• Shuffle Algorithm - Fisher-Yates shuffle for random card distribution
• Timing Controls - Delayed flip-back for mismatched pairs
• Responsive Grid - Adaptive card layout for all screen sizes

Technical Implementation:

• Color Generation: Dynamic dark hex color generation with configurable brightness
• Card Rendering: Dynamic DOM creation with flip animation classes
• Match Detection: Compares hex values and marks matched pairs
• Move Tracking: Counts user attempts and displays progress
• Win Detection: Monitors matched pairs and displays victory state

Core Functionality:

• 10 unique dark color pairs generated for each game session
• Interactive card flipping with smooth 3D animations
• Real-time move tracking and match counting
• Automatic win detection with congratulatory message
• One-click restart with new random colors

User Experience:

• Clean, modern interface with intuitive card layout
• Smooth 3D flip animations for card interactions
• Visual feedback for matches and mismatches
• Game progress tracking with move counter and match counter
• Responsive design that adapts to all screen sizes

Technical Features:

• Dynamic dark color generation with configurable brightness
• Efficient Map data structure for card state management
• Fisher-Yates shuffle algorithm for random card distribution
• SCSS-powered styling with mixins and variables
• Pure vanilla JavaScript - no external dependencies

How to Use:

• Click any card to flip it and reveal its hex color
• Click a second card to find its matching color pair
• Matched pairs stay flipped and are visually marked
• Mismatched pairs flip back after a short delay
• Complete all 10 pairs to win - try for the fewest moves!

Code Highlight:

function handleMatch() {
   const cardID = flippedCards[0];
   const cardElement = gameGrid.querySelectorAll(`.card[data-card_id="${cardID}"]`);

   cardElement.forEach(card => {
      card.classList.add('matched');
   });

   cardsMap.get(cardID).cardMatched = true;

   matchedPairs++;
   updateDisplay();

   flippedCards = [];
   isProcessing = false;

   // Check for win
   if (matchedPairs === cardCount) {
      handleWin();
   }
}

Key Learnings:

• Mastered DOM manipulation and dynamic card rendering
• Deep understanding of game state management with Map data structures
• Learned to implement shuffle algorithms and timing controls
• Gained expertise in CSS animations and 3D transformations
• Developed skills in creating responsive, interactive web games

Future Enhancements:

• Multiple difficulty levels with adjustable card counts
• Timer functionality for speed challenges
• High score tracking with local storage
• Sound effects for matches and mismatches
• Score system based on moves and time
• Multiplayer mode with turn-based gameplay
• Theme customization with different color palettes

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• 10 unique dark color pairs per game session
• Smooth 3D card flip animations
• Move tracking and match counting
• Automatic win detection
• One-click restart functionality
• Responsive design for all devices
• No external dependencies
• Pure vanilla JavaScript implementation
• SCSS styling with clean, modern UI