A classic memory matching game with a clean UI, timer, and score counter.
Website Goal: To create a classic and engaging memory matching game (also known as Concentration) with a clean user interface, a timer, and a score counter. The game should be intuitive and responsive.
Target Audience: Casual gamers, children, and anyone looking for a fun brain-training exercise.
Key Features & Sections:
Game Board: A grid of face-down cards (e.g., 4x4, 5x4, or 6x6 grid) with a shuffled set of matching pairs.
Card Functionality:
Flip on Click: When a card is clicked, it flips to reveal its image.
Match Logic: If two flipped cards have the same image, they remain face-up.
Mismatched Logic: If two flipped cards do not match, they automatically flip back face-down after a short delay (e.g., 1-1.5 seconds).
Game Information Panel: A persistent header or sidebar displaying key game metrics.
Timer: A running timer that starts when the first card is flipped and stops when all pairs are found. Display the time in MM:SS format.
Moves Counter: A counter that tracks the number of card flips (or pairs of flips) the player makes.
Score/Stars: A scoring system based on moves or time. For example, a star rating system (e.g., 3 stars for excellent, 2 for good, 1 for fair).
Game Status & End Screen:
A message area to display game status (e.g., "Click a card," "No match! Try again.").
A modal pop-up that appears when the game is won. This modal should display the final time, total moves, and a winning message (e.g., "Congratulations! You won in X moves and Y seconds!").
A "Play Again" button in the modal to reset the game and start a new round.
Initial Card Set:
Use a default set of images (e.g., icons of animals, fruits, or emojis) for the cards. The number of cards should be dynamic based on the grid size.
The cards should be shuffled randomly at the start of each game.
Functionality Requirements:
Responsive Grid: The card grid should adapt to different screen sizes, maintaining a clean and playable layout on mobile and desktop.
Preventing Extra Clicks: While two cards are flipped and visible (before flipping back), prevent the user from clicking on other cards.
Clear State Management: Use JavaScript to manage the state of the game, including which cards are flipped, matched, and the current move count and time.
Design Style:
Aesthetic: Bright, playful, and user-friendly. Use a flat or minimalist design for the cards and UI.
Color Palette: A vibrant and inviting color scheme.
Typography: A clear, rounded sans-serif font for the text and counters.
Animations: Smooth card flip animations (e.g., using CSS transform). A subtle animation when a pair is matched (e.g., a glow or slight scale change).