diff --git a/Games/Memory_Matching_Game/README.md b/Games/Memory_Matching_Game/README.md new file mode 100644 index 0000000000..d9ddf37262 --- /dev/null +++ b/Games/Memory_Matching_Game/README.md @@ -0,0 +1,39 @@ +# **Memory Matching Game** + +--- + +
+ +## **Description 📃** + +- 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 🎮** + +- 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. + +
+ +## **How to play? 🕹ī¸** + +- 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. + +
+ +## **Screenshots 📸** + +
+ +![Memory_Matching_Game](https://github.com/Saipradyumnagoud/GameZone/assets/143107589/193e98bf-82e1-49f7-9cc4-41fcdfcdb618) + +
+ diff --git a/Games/Memory_Matching_Game/index.html b/Games/Memory_Matching_Game/index.html new file mode 100644 index 0000000000..ad1cf6eea3 --- /dev/null +++ b/Games/Memory_Matching_Game/index.html @@ -0,0 +1,16 @@ + + + + + Memory Matching Game + + + +
+

Memory Matching Game

+

Score: 0

+
+
+ + + diff --git a/Games/Memory_Matching_Game/script.js b/Games/Memory_Matching_Game/script.js new file mode 100644 index 0000000000..557a2f5d37 --- /dev/null +++ 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 new file mode 100644 index 0000000000..da383674e1 --- /dev/null +++ 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 index 7f85183fa7..1cbb3e29c1 100644 --- 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)| +
diff --git a/assets/images/Memory_Matching_Game.png b/assets/images/Memory_Matching_Game.png new file mode 100644 index 0000000000..b263535e50 Binary files /dev/null and b/assets/images/Memory_Matching_Game.png differ