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)

    diff --git a/Source-Code/MemoryCard/index.html b/Source-Code/MemoryCard/index.html new file mode 100644 index 0000000..0037ab2 --- /dev/null +++ b/Source-Code/MemoryCard/index.html @@ -0,0 +1,19 @@ + + + + + + Memory Card Game + + + +
    +

    Memory Card Game

    +
    + +
    + +
    + + + diff --git a/Source-Code/MemoryCard/script.js b/Source-Code/MemoryCard/script.js new file mode 100644 index 0000000..e493312 --- /dev/null +++ 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; diff --git a/Source-Code/MemoryCard/style.css b/Source-Code/MemoryCard/style.css new file mode 100644 index 0000000..c787a6f --- /dev/null +++ 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; +}