Merge pull request #5082 from ayush-848/main

added the game Memory_Card
kunjgit · Aug 4, 2024 · f5d550b · f5d550b
2 parents 41d7292 + 5f9ffd0
commit f5d550b
Show file tree

Hide file tree

Showing 5 changed files with 354 additions and 0 deletions.
diff --git a/Games/Memory_Card/Readme.md b/Games/Memory_Card/Readme.md
@@ -0,0 +1,47 @@
+## Breathtaking Memory Card Game
+<br>
+
+## Description 📃
+
+In "Breathtaking Memory Card Game", players flip cards to match pairs and accumulate points. The game features a visually striking interface with glowing effects and a timer. The objective is to find all matching pairs before time runs out, with a scoring system that rewards successful matches and penalizes incorrect guesses.
+<br>
+
+## Functionalities 🎮
+
+    Start Game: Click the "Start Game" button to begin.
+    Flip Cards: Click on cards to flip them and try to find matching pairs.
+    Timer: A timer tracks the duration of the game.
+    Score: The score increases with successful matches and decreases with incorrect guesses.
+    Reset Game: Click the "Reset" button to start a new game.
+    Particle Effects: Enjoy visual effects when a pair is successfully matched.
+
+<br>
+Controls ⌨️
+
+    Mouse Click: Click on cards to flip them.
+
+<br>
+Scoring System 📈
+
+    Matching Pairs: Each successful match increases your score by 10 points.
+    Incorrect Guesses: Each incorrect match decreases your score by 1 point.
+    Game End: The game ends when all pairs are matched or when reset.
+
+<br>
+Difficulty 🚀
+
+    Card Shuffling: Cards are shuffled randomly to ensure a unique challenge each game.
+    Timer: A timer adds pressure to find matches quickly.
+
+<br>
+Game Over 🏁
+
+    Timer: The game ends when all pairs are matched or when the "Reset" button is clicked.
+    Final Score: Your final score is displayed, with an alert congratulating you on your performance.
+
+<br>
+
+## **Screenshots 📸**
+
+![Game Screenshot](![image](https://github.com/user-attachments/assets/58414edc-f1f4-4366-b109-4ca5892ddf4c)
+)
diff --git a/Games/Memory_Card/index.html b/Games/Memory_Card/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Breathtaking Memory Card Game</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+<body>
+    <div class="game-container">
+        <div class="card-grid" id="cardGrid"></div>
+        <div class="controls">
+            <button class="btn" id="startBtn">Start Game</button>
+            <button class="btn" id="resetBtn">Reset</button>
+        </div>
+        <div class="timer" id="timer">Time: 00:00</div>
+        <div class="score" id="score">Score: 0</div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Memory_Card/script.js b/Games/Memory_Card/script.js
@@ -0,0 +1,150 @@
+const cardGrid = document.getElementById('cardGrid');
+const startBtn = document.getElementById('startBtn');
+const resetBtn = document.getElementById('resetBtn');
+const timerDisplay = document.getElementById('timer');
+const scoreDisplay = document.getElementById('score');
+
+const cardValues = ['🌟', '🌙', '🌈', '🌞', '🌎', '🌺'];
+const cards = [...cardValues, ...cardValues];
+let flippedCards = [];
+let matchedPairs = 0;
+let score = 0;
+let timer;
+let seconds = 0;
+let gameStarted = false;
+
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
+function createCard(value) {
+    const card = document.createElement('div');
+    card.classList.add('card');
+    card.innerHTML = `
+        <div class="card-face card-front">${value}</div>
+        <div class="card-face card-back">?</div>
+    `;
+    card.addEventListener('click', flipCard);
+    return card;
+}
+
+function flipCard() {
+    if (!gameStarted) return;
+    if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
+        this.classList.add('flipped');
+        flippedCards.push(this);
+        createParticles(this);
+
+        if (flippedCards.length === 2) {
+            setTimeout(checkMatch, 1000);
+        }
+    }
+}
+
+function checkMatch() {
+    const [card1, card2] = flippedCards;
+    const value1 = card1.querySelector('.card-front').textContent;
+    const value2 = card2.querySelector('.card-front').textContent;
+
+    if (value1 === value2) {
+        card1.removeEventListener('click', flipCard);
+        card2.removeEventListener('click', flipCard);
+        card1.classList.add('glow');
+        card2.classList.add('glow');
+        matchedPairs++;
+        score += 10;
+        updateScore();
+
+        if (matchedPairs === cardValues.length) {
+            endGame();
+        }
+    } else {
+        card1.classList.remove('flipped');
+        card2.classList.remove('flipped');
+        score = Math.max(0, score - 1);
+        updateScore();
+    }
+
+    flippedCards = [];
+}
+
+function updateTimer() {
+    seconds++;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    timerDisplay.textContent = `Time: ${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+function updateScore() {
+    scoreDisplay.textContent = `Score: ${score}`;
+}
+
+function startGame() {
+    if (gameStarted) return;
+    gameStarted = true;
+    startBtn.disabled = true;
+    shuffleArray(cards);
+    cardGrid.innerHTML = '';
+    cards.forEach(value => {
+        const card = createCard(value);
+        cardGrid.appendChild(card);
+    });
+    timer = setInterval(updateTimer, 1000);
+}
+
+function resetGame() {
+    clearInterval(timer);
+    seconds = 0;
+    score = 0;
+    matchedPairs = 0;
+    gameStarted = false;
+    startBtn.disabled = false;
+    updateTimer();
+    updateScore();
+    cardGrid.innerHTML = '';
+}
+
+function endGame() {
+    clearInterval(timer);
+    gameStarted = false;
+    alert(`Congratulations! You won!\nTime: ${timerDisplay.textContent}\nScore: ${score}`);
+}
+
+function createParticles(element) {
+    const rect = element.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    for (let i = 0; i < 20; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+        document.body.appendChild(particle);
+
+        const size = Math.random() * 5 + 2;
+        const angle = Math.random() * Math.PI * 2;
+        const velocity = Math.random() * 2 + 1;
+        let x = centerX;
+        let y = centerY;
+
+        particle.style.width = `${size}px`;
+        particle.style.height = `${size}px`;
+        particle.style.left = `${x}px`;
+        particle.style.top = `${y}px`;
+
+        const animation = particle.animate([
+            { transform: `translate(0, 0)`, opacity: 1 },
+            { transform: `translate(${Math.cos(angle) * 100}px, ${Math.sin(angle) * 100}px)`, opacity: 0 }
+        ], {
+            duration: 1000 / velocity,
+            easing: 'cubic-bezier(0, .9, .57, 1)',
+        });
+
+        animation.onfinish = () => particle.remove();
+    }
+}
+
+startBtn.addEventListener('click', startGame);
+resetBtn.addEventListener('click', resetGame);
diff --git a/Games/Memory_Card/style.css b/Games/Memory_Card/style.css
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+body {
+    font-family: 'Orbitron', sans-serif;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    background: linear-gradient(135deg, #000000, #1c1c1c);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.game-container {
+    position: relative;
+    width: 800px;
+    height: 600px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+    overflow: hidden;
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+    padding: 20px;
+    perspective: 1000px;
+}
+
+.card {
+    width: 120px;
+    height: 180px;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    cursor: pointer;
+}
+
+.card-face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.5em;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background: linear-gradient(45deg, #00ffff, #00ff00);
+    overflow: hidden;
+}
+
+.card-front {
+    transform: rotateY(180deg);
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(5px);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.card-back {
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    font-size: 4em;
+    font-weight: bold;
+}
+
+.card.flipped {
+    transform: rotateY(180deg);
+}
+
+.controls {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 20px;
+}
+
+.btn {
+    padding: 10px 20px;
+    font-size: 1.2em;
+    background: linear-gradient(45deg, #00ffff, #00ff00);
+    border: none;
+    border-radius: 5px;
+    color: #000;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+
+.timer, .score {
+    position: absolute;
+    top: 20px;
+    font-size: 1.5em;
+    color: #00ffff;
+}
+
+.timer {
+    left: 20px;
+}
+
+.score {
+    right: 20px;
+}
+
+@keyframes glow {
+    0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
+    50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.7); }
+    100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
+}
+
+.glow {
+    animation: glow 2s infinite;
+}
+
+.particle {
+    position: absolute;
+    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
+    border-radius: 50%;
+    pointer-events: none;
+}
diff --git a/README.md b/README.md
@@ -1671,8 +1671,12 @@ This repository also provides one such platforms where contributers come over an
 
 | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)|
 |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)|
+
+| [Memory_Card](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Card)|
+
 |[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)|
 
+
  </center>
 
 <br>