Devil Dolphin Memory 🐬🧠

Welcome to Devil Dolphin Memory, a beautifully designed, responsive web-based memory card game built with plain HTML, CSS, and Vanilla JavaScript. Test your memory skills, complete dynamically generated levels, and earn crowns based on your performance!

✨ Features

• 🎮 Dynamic Levels: The game features multiple levels with varying difficulties. Levels are generated dynamically with a set number of cards.
• ⏱️ Live Game Stats: Tracks your time, moves made, misses, pairs found, and calculates your accuracy in real-time.
• 🏆 Achievements System: Depending on your game performance (time and moves), earn crowns:
  • 👑 Red Crown (Level 3 - Expert)
  • 👑 Gold Crown (Level 2 - Master)
  • 👑 Green Crown (Level 1 - Starter)
• 📈 Local Storage Persistence: Automatically saves your levels statistics, overall accuracy, and best scores cross-sessions using browser localStorage.
• 📱 Fully Responsive: Carefully crafted CSS (including dedicated responsive files) ensures the game looks great on desktop, tablet, and mobile devices.
• 🖥️ Fullscreen Mode: Immerse yourself in the game by toggling the fullscreen view during gameplay.

🛠️ Tech Stack

• HTML5: Semantic architecture for index.html (home dashboard) and game.html (gaming board).
• CSS3: Custom modular stylesheet architecture (separated by components like header, footer, main, and Responsivity).
• Vanilla JavaScript (ES6 Modules):
  • game.js: The core object-oriented game engine (MemoryCardGame class) handling logic, card flips, and timer operations.
  • home.js: Drives the home dashboard, populates levels, and renders the player's saved score and achievements.
  • utils.js: Houses common utilities like time formatting, array shuffling, formatting outputs, and Local Storage abstractions.
  • data/: Contains modular configuration data (levels.js) and the image assets mappings (cards_images.js).

📂 Codebase Structure

├── assets/                  # Icons, images, and achievement crowns
│   ├── images/
│   │   ├── icons/
│   │   └── crowns/
├── scripts/                 # Core logic and JS Modules
│   ├── data/                # Levels config and cards images data
│   ├── game.js              # Game board logic and Mechanics
│   ├── home.js              # Home dashboard and Stats viewer
│   └── utils.js             # Utility functions
├── styles/                  # Modular CSS formatting
│   ├── game/                # Game page styles
│   ├── home/                # Home dashboard styles
│   ├── Responsivity/        # Media queries for responsive UI
│   └── all.css              # Global variables and CSS resets
├── game.html                # The playing field view
└── index.html               # The entry, level-selection and stats view

🚀 Getting Started

Since it's built with Vanilla HTML/CSS/JS, running the project is incredibly simple!

1. Clone the repository to your local machine:

   git clone <repository-url>

2. Navigate to the project directory:

   cd "Devil Dolphin Memory"

3. Open index.html in your favorite web browser or start a local live server:

   • For VS Code users, standard extensions like Live Server work perfectly.
   • Or simply double-click index.html in your file explorer.

4. Select a level and start matching cards!

🧩 How to Play

1. Select a Level: Click a level from the dashboard.
2. Match the Cards: Click on cards to flip them. Try to find two matching cards.
3. Minimize Misses: Every pair of non-matching flipped cards counts as a miss, reducing your accuracy.
4. Earn Crowns: Complete the game fast and with minimal misses to get the best crown.
5. Quit or Start Over: Use the Cancel button anytime to return to the home screen.

---

Designed and Built by Adel Maach