Merge pull request #4468 from Saipradyumnagoud/main

Added Memory Matching Game
kunjgit · Jun 15, 2024 · 53028a3 · 53028a3
2 parents cdbf385 + bd160f3
commit 53028a3
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 7 deletions.
diff --git a/Games/Memory_Matching_Game/README.md b/Games/Memory_Matching_Game/README.md
@@ -0,0 +1,39 @@
+# **Memory Matching Game**
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- The Memory Matching Game is a fun and interactive game where players flip over pairs of cards to find matches. The goal is to match all pairs of cards in the shortest time and with the fewest attempts possible. This game helps improve memory and concentration skills.
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Randomly shuffled cards at the start of each game.
+- Cards flip back over if they don't match.
+- Score tracking: gain points for each match.
+- Game ends when all pairs are matched.
+- Alerts the player when the game is completed with their final score.
+
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Start the game by clicking on any card.
+- Cards will flip to reveal the symbol on the other side.
+- Try to find matching pairs by remembering the position of previously flipped cards.
+- Click on two cards to flip them. If they match, they will stay flipped. If they don't, they will flip back over.
+- Continue flipping cards until all pairs are matched.
+- Your score is displayed at the top, increasing with each successful match.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+![Memory_Matching_Game](https://github.com/Saipradyumnagoud/GameZone/assets/143107589/193e98bf-82e1-49f7-9cc4-41fcdfcdb618)
+
+<br>
+
diff --git a/Games/Memory_Matching_Game/index.html b/Games/Memory_Matching_Game/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Matching Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <h1>Memory Matching Game</h1>
+        <p id="score">Score: 0</p>
+        <div class="game-board" id="game-board"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Memory_Matching_Game/script.js b/Games/Memory_Matching_Game/script.js
@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const cardArray = [
+        { name: 'A', id: 1 }, { name: 'A', id: 2 },
+        { name: 'B', id: 3 }, { name: 'B', id: 4 },
+        { name: 'C', id: 5 }, { name: 'C', id: 6 },
+        { name: 'D', id: 7 }, { name: 'D', id: 8 },
+        { name: 'E', id: 9 }, { name: 'E', id: 10 },
+        { name: 'F', id: 11 }, { name: 'F', id: 12 },
+        { name: 'G', id: 13 }, { name: 'G', id: 14 },
+        { name: 'H', id: 15 }, { name: 'H', id: 16 }
+    ];
+
+    cardArray.sort(() => 0.5 - Math.random());
+
+    const gameBoard = document.getElementById('game-board');
+    const scoreDisplay = document.getElementById('score');
+    let cardsChosen = [];
+    let cardsChosenId = [];
+    let cardsWon = [];
+    let score = 0;
+
+    function createBoard() {
+        cardArray.forEach((card, index) => {
+            const cardElement = document.createElement('div');
+            cardElement.setAttribute('data-id', index);
+            cardElement.classList.add('card');
+            cardElement.addEventListener('click', flipCard);
+            gameBoard.appendChild(cardElement);
+        });
+    }
+
+    function checkForMatch() {
+        const cards = document.querySelectorAll('.card');
+        const [optionOneId, optionTwoId] = cardsChosenId;
+
+        if (cardsChosen[0] === cardsChosen[1]) {
+            cards[optionOneId].classList.add('flipped');
+            cards[optionTwoId].classList.add('flipped');
+            cardsWon.push(cardsChosen);
+            score += 10;
+            scoreDisplay.textContent = `Score: ${score}`;
+        } else {
+            cards[optionOneId].innerHTML = '';
+            cards[optionTwoId].innerHTML = '';
+        }
+
+        cardsChosen = [];
+        cardsChosenId = [];
+
+        if (cardsWon.length === cardArray.length / 2) {
+            setTimeout(() => alert(`Congratulations! You found all the matches! Your final score is ${score}.`), 100);
+        }
+    }
+
+    function flipCard() {
+        const cardId = this.getAttribute('data-id');
+        if (!cardsChosenId.includes(cardId) && cardsChosen.length < 2) {
+            cardsChosen.push(cardArray[cardId].name);
+            cardsChosenId.push(cardId);
+            this.innerHTML = cardArray[cardId].name;
+            this.classList.add('flipped');
+            if (cardsChosen.length === 2) {
+                setTimeout(checkForMatch, 500);
+            }
+        }
+    }
+
+    createBoard();
+});
diff --git a/Games/Memory_Matching_Game/styles.css b/Games/Memory_Matching_Game/styles.css
@@ -0,0 +1,44 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+}
+
+.game-container {
+    margin: 0 auto;
+    width: 600px;
+}
+
+.game-board {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.card {
+    width: 100px;
+    height: 100px;
+    background-color: #333;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    color: white;
+    border-radius: 8px;
+    transition: transform 0.2s;
+}
+
+.card.flipped {
+    background-color: #fff;
+    color: #333;
+    transform: rotateY(180deg);
+}
+
+#score {
+    font-size: 1.5em;
+    margin-top: 20px;
+}
diff --git a/README.md b/README.md
@@ -327,13 +327,6 @@ This repository also provides one such platforms where contributers come over an
 | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) |
 |[Color The Page](https://github.com/kunjgit/GameZone/tree/main/Games/Color_The_Page)|
 |[Lunar Lander](https://github.com/kunjgit/GameZone/tree/main/Games/Lunar_Lander)|
-
-
-
-
-
-
-
 |[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game)   |
 |[Chess_Game_computer](https://github.com/kunjgit/GameZone/tree/main/Games/Chess_Game_computer)   |
 |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light)   |
@@ -360,6 +353,7 @@ This repository also provides one such platforms where contributers come over an
 | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) |
 | [Tower_Block_Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tower_Block_Game) |
 | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
+| [Memory_Matching_Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Memory_Matching_Game) |
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
 | [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) | 
 | [Helicopter_Game](https://github.com/kinjgit/GameZone/tree/main/Games/Helicopter_Game) |
@@ -368,6 +362,7 @@ This repository also provides one such platforms where contributers come over an
 |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)|
 |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)|
 
+
  </center>
 
 <br>

diff --git a/assets/images/Memory_Matching_Game.png b/assets/images/Memory_Matching_Game.png