From d7d24306046baacec68b7af07fa10a62bb09ba4b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 8 Aug 2024 23:35:36 +0530 Subject: [PATCH 1/5] Add template for project --- Source-Code/MemoryCard/index.html | 11 +++++++++++ Source-Code/MemoryCard/script.js | 0 Source-Code/MemoryCard/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/MemoryCard/index.html create mode 100644 Source-Code/MemoryCard/script.js create mode 100644 Source-Code/MemoryCard/style.css diff --git a/Source-Code/MemoryCard/index.html b/Source-Code/MemoryCard/index.html new file mode 100644 index 0000000..9cecf52 --- /dev/null +++ b/Source-Code/MemoryCard/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/Source-Code/MemoryCard/script.js b/Source-Code/MemoryCard/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/MemoryCard/style.css b/Source-Code/MemoryCard/style.css new file mode 100644 index 0000000..e69de29 From 8c8f0ae950bfc12beaad0e59185937c2dece593a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 00:30:18 +0530 Subject: [PATCH 2/5] Add div and button for generating cards --- Source-Code/MemoryCard/index.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/Source-Code/MemoryCard/index.html b/Source-Code/MemoryCard/index.html index 9cecf52..0037ab2 100644 --- a/Source-Code/MemoryCard/index.html +++ b/Source-Code/MemoryCard/index.html @@ -3,9 +3,17 @@ - + Memory Card Game + - +
+

Memory Card Game

+
+ +
+ +
+ - \ No newline at end of file + From 9ab5fc9def27bc964f0d78ac8eda402180c996c3 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 00:31:06 +0530 Subject: [PATCH 3/5] Add functioanlities --- Source-Code/MemoryCard/script.js | 107 +++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) diff --git a/Source-Code/MemoryCard/script.js b/Source-Code/MemoryCard/script.js index e69de29..e493312 100644 --- a/Source-Code/MemoryCard/script.js +++ b/Source-Code/MemoryCard/script.js @@ -0,0 +1,107 @@ +const cardValues = [ + '🍎', + '🍎', + '🍌', + '🍌', + '🍮', + '🍮', + '🎂', + '🎂', + '🍟', + '🍟', + '🍫', + '🍫', + '🍇', + '🍇', + '🥝', + '🥝', +]; +let shuffledValues = []; +let cardElements = []; +let flippedCards = []; +let matchedCards = []; + +const shuffleArray = (array) => { + let currentIndex = array.length; + let temporaryValue; + let randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +}; + +const checkMatch = () => { + const [card1, card2] = flippedCards; + + if ( + card1.querySelector('.card-back').textContent + === card2.querySelector('.card-back').textContent + ) { + matchedCards.push(card1, card2); + } else { + card1.classList.remove('flipped'); + card2.classList.remove('flipped'); + } + flippedCards = []; + + if (matchedCards.length === cardElements.length) { + alert('Congratulations! You found all pairs!'); + } +}; + +const flipCard = (card) => { + if ( + flippedCards.length < 2 + && !card.classList.contains('flipped') + && !matchedCards.includes(card) + ) { + card.classList.add('flipped'); + flippedCards.push(card); + + if (flippedCards.length === 2) { + setTimeout(checkMatch, 1000); + } + } +}; +const startGame = () => { + shuffledValues = shuffleArray(cardValues); + const board = document.getElementById('game-board'); + board.innerHTML = ''; + matchedCards = []; + cardElements = []; + for (let i = 0; i < shuffledValues.length; i += 1) { + const card = document.createElement('div'); + card.classList.add('card'); + + const cardInner = document.createElement('div'); + cardInner.classList.add('card-inner'); + + const cardFront = document.createElement('div'); + cardFront.classList.add('card-front'); + + const cardBack = document.createElement('div'); + cardBack.classList.add('card-back'); + cardBack.textContent = shuffledValues[i]; + + cardInner.appendChild(cardFront); + cardInner.appendChild(cardBack); + card.appendChild(cardInner); + + card.addEventListener('click', () => flipCard(card)); + board.appendChild(card); + cardElements.push(card); + } +}; + +const btn = document.querySelector('.btn'); +btn.addEventListener('click', startGame); +// Initialize the game when the page loads +window.onload = startGame; From c3e45bfb8e7dd88e0f942ec0c0e6d7ccdbfbaf02 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 00:31:18 +0530 Subject: [PATCH 4/5] Add styles --- Source-Code/MemoryCard/style.css | 87 ++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/Source-Code/MemoryCard/style.css b/Source-Code/MemoryCard/style.css index e69de29..c787a6f 100644 --- a/Source-Code/MemoryCard/style.css +++ b/Source-Code/MemoryCard/style.css @@ -0,0 +1,87 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #eeddf0; +} + +h1 { + color: #d38692; + font-size: 2em; +} + +.container { + text-align: center; + background-color: #a7f1c5; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.game-board { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-template-rows: repeat(4, 100px); + gap: 10px; + margin-bottom: 20px; +} + +.card { + width: 100px; + height: 100px; + background-color: #eee; + display: flex; + align-items: center; + justify-content: center; + font-size: 2em; + cursor: pointer; + color: transparent; + perspective: 1000px; /* Added for 3D effect */ +} + +.card-inner { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.6s; + transform-style: preserve-3d; + position: relative; +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card-front { + background-color: #e68ce0; +} + +.card-back { + background-color: #fff; + font-size: 60px; + color: #000; + transform: rotateY(180deg); +} + +.card.flipped .card-inner { + transform: rotateY(180deg); +} + +button { + padding: 15px 20px; + font-size: 18px; + font-weight: 600; + color: rgb(228, 240, 240); + border: none; + cursor: pointer; + background-color: #008cba; +} From 4282bf266cc0437c8daa3a75fcd56c9703acf439 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 00:31:27 +0530 Subject: [PATCH 5/5] update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 5616387..f989460 100644 --- a/README.md +++ b/README.md @@ -364,6 +364,17 @@ In order to run this project you need: +
  • +
    +Memory Card Game +

    The Memory Card Game is a classic card-matching game designed to enhance cognitive skills and memory. Players are presented with a grid of face-down cards. The goal is to find and match all pairs of cards. This project demonstrates fundamental web development skills using HTML, CSS, and JavaScript.

    + +
    +
    • +

    (back to top)