From 2649fcba93558586812eb70e67a5e32cae7b96cd Mon Sep 17 00:00:00 2001 From: Ayush Deb Date: Sat, 3 Aug 2024 23:03:55 +0530 Subject: [PATCH 1/3] added the game Memory_Card --- Games/Memory_Card/Readme.md | 46 +++++++++++ Games/Memory_Card/index.html | 21 +++++ Games/Memory_Card/script.js | 150 +++++++++++++++++++++++++++++++++++ Games/Memory_Card/style.css | 132 ++++++++++++++++++++++++++++++ 4 files changed, 349 insertions(+) create mode 100644 Games/Memory_Card/Readme.md create mode 100644 Games/Memory_Card/index.html create mode 100644 Games/Memory_Card/script.js create mode 100644 Games/Memory_Card/style.css diff --git a/Games/Memory_Card/Readme.md b/Games/Memory_Card/Readme.md new file mode 100644 index 0000000000..53e0ed5f01 --- /dev/null +++ b/Games/Memory_Card/Readme.md @@ -0,0 +1,46 @@ +## Breathtaking Memory Card Game +
+ +## 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. +
+ +## 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. + +
+Controls ⌨️ + + Mouse Click: Click on cards to flip them. + +
+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. + +
+Difficulty 🚀 + + Card Shuffling: Cards are shuffled randomly to ensure a unique challenge each game. + Timer: A timer adds pressure to find matches quickly. + +
+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. + +
+ +## **Screenshots 📸** + +![Game Screenshot](path/to/your/screenshot.png) diff --git a/Games/Memory_Card/index.html b/Games/Memory_Card/index.html new file mode 100644 index 0000000000..e74660900c --- /dev/null +++ b/Games/Memory_Card/index.html @@ -0,0 +1,21 @@ + + + + + + Breathtaking Memory Card Game + + + +
+
+
+ + +
+
Time: 00:00
+
Score: 0
+
+ + + \ No newline at end of file diff --git a/Games/Memory_Card/script.js b/Games/Memory_Card/script.js new file mode 100644 index 0000000000..a88b2ea46e --- /dev/null +++ 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 = ` +
${value}
+
?
+ `; + 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); \ No newline at end of file diff --git a/Games/Memory_Card/style.css b/Games/Memory_Card/style.css new file mode 100644 index 0000000000..1c93ab1caf --- /dev/null +++ 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; +} \ No newline at end of file From e042458c00292972f6f3f85c358594bdf3bfaf2b Mon Sep 17 00:00:00 2001 From: Ayush Deb <126975547+ayush-848@users.noreply.github.com> Date: Sat, 3 Aug 2024 23:11:19 +0530 Subject: [PATCH 2/3] Update Readme.md --- Games/Memory_Card/Readme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Games/Memory_Card/Readme.md b/Games/Memory_Card/Readme.md index 53e0ed5f01..6ffe8cb0f7 100644 --- a/Games/Memory_Card/Readme.md +++ b/Games/Memory_Card/Readme.md @@ -43,4 +43,5 @@ Game Over 🏁 ## **Screenshots 📸** -![Game Screenshot](path/to/your/screenshot.png) +![Game Screenshot](![image](https://github.com/user-attachments/assets/58414edc-f1f4-4366-b109-4ca5892ddf4c) +) From 7aa4141decb245670b79cca10760bdd79013a1f8 Mon Sep 17 00:00:00 2001 From: Ayush Deb Date: Sat, 3 Aug 2024 23:12:22 +0530 Subject: [PATCH 3/3] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ad93e8faa9..17fb018f27 100644 --- a/README.md +++ b/README.md @@ -1688,7 +1688,7 @@ This repository also provides one such platforms where contributers come over an | [Airhockey_game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_game)| | [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)|