From 6932eb3dace7f4c61bcecbd6ca91921982ae5cc8 Mon Sep 17 00:00:00 2001 From: Tanvi2307 Date: Thu, 23 Oct 2025 12:25:27 +0530 Subject: [PATCH] Added Memory Match Game under Frontend/MiniProjects --- .../MiniProjects/memory-match-game/README.md | 82 +++++++++++++++++ .../MiniProjects/memory-match-game/index.html | 18 ++++ .../MiniProjects/memory-match-game/script.js | 90 +++++++++++++++++++ .../MiniProjects/memory-match-game/style.css | 80 +++++++++++++++++ 4 files changed, 270 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/memory-match-game/README.md create mode 100644 Domains/Frontend/MiniProjects/memory-match-game/index.html create mode 100644 Domains/Frontend/MiniProjects/memory-match-game/script.js create mode 100644 Domains/Frontend/MiniProjects/memory-match-game/style.css diff --git a/Domains/Frontend/MiniProjects/memory-match-game/README.md b/Domains/Frontend/MiniProjects/memory-match-game/README.md new file mode 100644 index 00000000..50300d52 --- /dev/null +++ b/Domains/Frontend/MiniProjects/memory-match-game/README.md @@ -0,0 +1,82 @@ +# Memory Match Game + +**Contributor:** [Tanvi2307](https://github.com/Tanvi2307) + +A fun and simple memory card matching game built with HTML, CSS, and JavaScript. + +--- + +## Overview + +Memory Match Game is a classic card matching game where players flip over cards to find pairs with the same symbol. The goal is to match all pairs in the least time possible. This project demonstrates the use of DOM manipulation, event handling, and CSS animations. + +--- + +## Tech Stack + +| Technology | Purpose | +|------------|------------------------------| +| HTML5 | Game structure and layout | +| CSS3 | Styling and animations | +| JavaScript | Game logic and interactivity | + +--- + +## How to Play + +1. Click on any card to flip it over and reveal the symbol. +2. Flip another card to find its matching pair. +3. If the two cards match, they stay flipped. +4. If they do not match, they flip back after a short delay. +5. Continue flipping cards until all pairs are matched. +6. Use the **Restart Game** button to start over at any time. + +--- + +## Features + +- Randomly shuffles cards on every game start. +- Smooth flip animation using CSS transitions. +- Prevents clicking more than two cards at once. +- Tracks matched pairs and alerts when the game is won. +- Restart button to reset the game. + +--- + +## Installation + +To run the game locally: + +1. Clone or download the repository. +2. Navigate to `Domains/Frontend/MiniProjects/memory-match-game` folder. +3. Open `index.html` in any modern web browser. + +--- + +## Usage + +No installation or build tools required! Simply open the `index.html` file in your favorite browser and enjoy playing. + +--- + +## Contributing + +Contributions are welcome! To contribute: + +1. Fork the original repository. +2. Create a new branch for your feature or bugfix. +3. Add your project files in the appropriate folder. +4. Commit and push your changes. +5. Open a Pull Request describing your additions. + +Please follow the project structure and keep code clean and well-documented. + +--- + +## License + +This project is open source and available under the [MIT License](LICENSE). + +--- + +Happy Matching! 🧠🎉 diff --git a/Domains/Frontend/MiniProjects/memory-match-game/index.html b/Domains/Frontend/MiniProjects/memory-match-game/index.html new file mode 100644 index 00000000..bb4821d0 --- /dev/null +++ b/Domains/Frontend/MiniProjects/memory-match-game/index.html @@ -0,0 +1,18 @@ + + + + + + Memory Match Game + + + +

Memory Match Game

+
+ +
+ + + + + diff --git a/Domains/Frontend/MiniProjects/memory-match-game/script.js b/Domains/Frontend/MiniProjects/memory-match-game/script.js new file mode 100644 index 00000000..86e4aedd --- /dev/null +++ b/Domains/Frontend/MiniProjects/memory-match-game/script.js @@ -0,0 +1,90 @@ +const cardsArray = ['🍎', '🍌', '🍇', '🍓', '🍍', '🥝', '🍉', '🍒']; +let cards = [...cardsArray, ...cardsArray]; // duplicate for pairs +let flippedCards = []; +let matchedCount = 0; + +const gameContainer = document.getElementById('game'); +const restartBtn = document.getElementById('restart'); + +function shuffle(array) { + for (let i = array.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} + +function createCard(symbol) { + const card = document.createElement('div'); + card.classList.add('card'); + card.dataset.symbol = symbol; + + const cardInner = document.createElement('div'); + cardInner.classList.add('card-inner'); + + const cardFront = document.createElement('div'); + cardFront.classList.add('card-front'); + cardFront.textContent = symbol; + + const cardBack = document.createElement('div'); + cardBack.classList.add('card-back'); + cardBack.textContent = '?'; + + cardInner.appendChild(cardFront); + cardInner.appendChild(cardBack); + card.appendChild(cardInner); + + card.addEventListener('click', () => flipCard(card)); + + return card; +} + +function flipCard(card) { + if ( + flippedCards.length < 2 && + !flippedCards.includes(card) && + !card.classList.contains('matched') + ) { + card.classList.add('flipped'); + flippedCards.push(card); + + if (flippedCards.length === 2) { + checkMatch(); + } + } +} + +function checkMatch() { + const [card1, card2] = flippedCards; + if (card1.dataset.symbol === card2.dataset.symbol) { + card1.classList.add('matched'); + card2.classList.add('matched'); + matchedCount += 2; + flippedCards = []; + + if (matchedCount === cards.length) { + setTimeout(() => alert('🎉 You matched all pairs! You win! 🎉'), 500); + } + } else { + setTimeout(() => { + card1.classList.remove('flipped'); + card2.classList.remove('flipped'); + flippedCards = []; + }, 1000); + } +} + +function setupGame() { + matchedCount = 0; + flippedCards = []; + gameContainer.innerHTML = ''; + cards = shuffle(cards); + cards.forEach(symbol => { + const card = createCard(symbol); + gameContainer.appendChild(card); + }); +} + +restartBtn.addEventListener('click', setupGame); + +setupGame(); diff --git a/Domains/Frontend/MiniProjects/memory-match-game/style.css b/Domains/Frontend/MiniProjects/memory-match-game/style.css new file mode 100644 index 00000000..438ce5fc --- /dev/null +++ b/Domains/Frontend/MiniProjects/memory-match-game/style.css @@ -0,0 +1,80 @@ +body { + font-family: Arial, sans-serif; + background-color: #2c3e50; + color: #ecf0f1; + text-align: center; + margin: 0; + padding: 20px; +} + +h1 { + margin-bottom: 20px; +} + +.game-container { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-gap: 15px; + justify-content: center; + margin-bottom: 20px; +} + +.card { + width: 100px; + height: 100px; + background-color: #34495e; + border-radius: 10px; + cursor: pointer; + position: relative; + perspective: 1000px; +} + +.card-inner { + position: relative; + width: 100%; + height: 100%; + transition: transform 0.6s; + transform-style: preserve-3d; +} + +.card.flipped .card-inner { + transform: rotateY(180deg); +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; + font-size: 50px; +} + +.card-front { + background-color: #1abc9c; + color: #fff; + transform: rotateY(180deg); +} + +.card-back { + background-color: #2980b9; + color: #fff; +} + +button#restart { + padding: 10px 20px; + font-size: 16px; + background-color: #e74c3c; + border: none; + border-radius: 5px; + color: white; + cursor: pointer; +} + +button#restart:hover { + background-color: #c0392b; +}