🎮 Memory Card Game

A modern, fully accessible memory card game built with vanilla JavaScript, HTML5, and CSS3. Match pairs of cards while tracking your moves and time!

✨ Features

• Three Difficulty Levels: Easy (4×4), Medium (6×6), Hard (8×8)
• Customizable Themes: 4 visual themes including tropical images from Pexels
• Statistics Tracking: Moves, timer (MM:SS), and pairs matched
• Sound Effects: Card flip, match, mismatch, and victory sounds with toggle
• Full Accessibility: WCAG 2.1 compliant with screen reader support
• Keyboard Navigation: Arrow keys to navigate, Enter/Space to flip cards
• Visual Effects: 3D card flip animations with focus indicators
• Responsive Design: Mobile-friendly and touch-enabled

Available Themes

• Game Icons (default): Classic emoji icons
• Tropical Paradise: Royalty-free tropical images 🌴🥥🍍
• Beach Vibes: Ocean-themed emoji items 🐚🐠🏄
• Sunset Dreams: Warm sunset emoji elements 🌻🦋💎

♿ Accessibility Features

• WCAG 2.1 Level AA Compliant
• Screen Reader Support: Full ARIA labels and live region announcements
• Keyboard Navigation:
  • Tab through controls and cards
  • Arrow keys (↑↓←→) to navigate grid
  • Enter/Space to flip cards
• Focus Management: High-contrast yellow outline on focused elements
• Semantic HTML: Proper heading hierarchy, landmarks, and roles
• Skip Link: Jump directly to game board

🚀 How to Play

1. Select difficulty level (Easy, Medium, or Hard)
2. Choose a theme from the dropdown
3. Navigate cards using mouse clicks, Tab key, or arrow keys (↑↓←→)
4. Flip cards by clicking or pressing Enter/Space when focused
5. Match all pairs to win and see your final stats!

🎓 Assignment Requirements

All code examples reference script.js.

NEW! Refresh + Multi-Tab State

• Refresh keeps the same game state (cards, moves, timer, difficulty, theme).
• Each tab has its own unique game.
• Total moves count is shared across tabs.
• Reset Moves Total.

1. Functional Programming (Lines 50-56)

Pure function using flatMap() that creates card data without mutating external state.

2. DOM Manipulation (Lines 88-111)

Clones single template element to dynamically generate all game cards using cloneNode(), appendChild(), and querySelector().

3. Event Handling (Lines 166-191)

Card click handler using addEventListener() and event delegation pattern.

4. ES6 Features

Arrow functions, const/let, template literals, destructuring, and spread operator throughout.

📁 Project Structure

MemoryGame-JS/
├── index.html              # Main HTML with ARIA attributes
├── style.css               # Styling and animations
├── script.js               # Game logic with accessibility
├── download_images.py      # Pexels API image downloader
└── assets/
    ├── images/tropical/    # 32 royalty-free tropical images
    └── sound/              # Sound effects (MP3 files)

🛠️ Technologies

HTML5, CSS3 (Flexbox/Grid/Animations), JavaScript ES6+, Web Audio API, ARIA/WCAG 2.1

🌐 Browser Compatibility

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Requires ES6+ support

🎯 Assignment Enhancements (5/4 - Extra Credit!)

1. Timer Feature ⏱️

Real-time timer in MM:SS format tracking game duration from first card flip.

2. Difficulty Levels 🎚️

Three difficulty options changing grid size and number of card pairs.

3. Sound Effects 🔊

Four sound types (flip, match, mismatch, victory) with toggle control and localStorage persistence.

4. Customizable Card Styles 🎨

Four themes with unique symbols and color schemes. Theme selection persists across sessions via localStorage.

5. Full Accessibility (BONUS) ♿

WCAG 2.1 Level AA compliance with screen reader support, keyboard navigation (arrow keys + Enter/Space), ARIA labels, live regions, and semantic HTML structure.

---

Enjoy the game! 🎉