https://github.com/subramaniyajothi6/flip-memory-game
Flip Memory Game — A fun and responsive memory-matching card game built with HTML, CSS, and JavaScript (DOM).
https://github.com/subramaniyajothi6/flip-memory-game
css css3 html5 javascript memory-game responsive-design webgames
Last synced: about 1 month ago
JSON representation
Flip Memory Game — A fun and responsive memory-matching card game built with HTML, CSS, and JavaScript (DOM).
- Host: GitHub
- URL: https://github.com/subramaniyajothi6/flip-memory-game
- Owner: Subramaniyajothi6
- Created: 2025-06-12T19:00:08.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-12T19:14:06.000Z (12 months ago)
- Last Synced: 2025-06-12T20:43:00.232Z (12 months ago)
- Topics: css, css3, html5, javascript, memory-game, responsive-design, webgames
- Language: CSS
- Homepage: https://flip-memorygame.netlify.app/
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎮 Flip Memory Game
A classic memory matching game where players flip cards to find matching pairs. Built using **HTML**, **CSS**, and **JavaScript (DOM manipulation)**.
---
## 📋 Project Description
This game challenges the player’s memory skills by presenting a 4x4 grid of color-coded cards. Each time the game starts, the cards are shuffled and placed face down. Players must flip two cards at a time to find matching pairs. If a pair matches, it stays face-up. If not, both cards flip back after a short delay.
---
## ✅ Features
- Responsive 4x4 card grid layout
- Color pair matching logic
- Flip animations with smooth transitions
- Shuffle function to randomize card positions
- Restart button to reset the game at any time
- Built using pure HTML, CSS (no frameworks), and vanilla JavaScript (DOM manipulation)
---
## 🛠 Tech Stack
- **HTML** – for page structure
- **CSS** – for styling and animation
- **JavaScript (DOM)** – for interactivity and game logic
---
## 🚀 How to Run Locally
1. **Clone this repository**
```bash
git clone https://github.com/Subramaniyajothi6/memory-game.git
cd memory-game
```
2. **Open the game**
- Open `index.html` in any modern browser.
---
## 🌐 Live Demo
Visit the deployed version here:
**[https://flip-memorygame.netlify.app/](https://flip-memorygame.netlify.app/)**
---
## ▶️ How to Play
1. Click on any card to flip it.
2. Then click a second card.
3. If both cards match, they stay face-up.
4. If not, they flip back after a second.
5. Try to match all pairs to win!
6. Use the **Restart** button to play again.
---
## 📁 Folder Structure
```
memory-game/
├── index.html # HTML structure
├── style.css # Game styling
├── script.js # Game logic using DOM
└── README.md # Project info
```
---
## 📄 Terms and Conditions
- This project is for **assessment purposes** only.
- You are encouraged to **open-source** the project.
---
## 🧠 Author
**subramaniyajothi**
[GitHub Profile](https://github.com/Subramaniyajothi6)
---
Enjoy building and have fun matching! 🎉