Memory Game 😎

src/Games/Memory_Card_Game/README.md

@@ -0,0 +1,46 @@
+# **MEMORY CARD GAME** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+- Memory Game, also known as the Concentration card game or Matching Game is a classic card-flipping game where players test their memory skills by matching pairs of cards. 
+- The objective of the game is to flip over two cards at a time and find all the matching pairs within the specified number of moves.
+
+<br>
+
+## **functionalities 🎮**
+
+- You will start by flipping over one card
+- If the next card you flip matches, both the cards will stay flipped and moves increases by 1. 
+- If the next card you flip does not match, the cards flip back.
+- The game continues until you match all the cards on the board.
+- Timer will be running for 5 minutes, after this the game ends.
+
+<br>
+
+## **How to play? 🕹️**
+
+- Start by flipping over cards
+- Until All pair of cards are matched, the game continues.
+- Max Time limit you have is 5 mins.
+- Happy Playing😉!!
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/ssitvit/Games-and-Go/assets/114330097/65945e05-1ed9-42f5-bebc-53a123b8ab03)
+
+<br>
+
+## **Creator 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### **Thanks for using this game**
+

src/Games/Memory_Card_Game/memoryCard.css

@@ -0,0 +1,137 @@
+:root {
+    /* --color-green--light: #00c46a; */
+    /* background-image: linear-gradient(135deg, #71FA32, #009DE0) ; */
+
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+body {
+    background-color: #009DE0;
+}
+
+.wrapper {
+    box-sizing: content-box;
+    width: 26.87em;
+    padding: 2.5em 3em;
+    /* background-color: #ffffff; */
+    background-image: linear-gradient(to right, #BDC3C7, #ECF0F1);
+    position: absolute;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 50%;
+    border-radius: 0.6em;
+    box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2);
+}
+
+.game-container {
+    position: relative;
+    width: 100%;
+    display: grid;
+    gap: 0.6em;
+}
+
+.stats-container {
+    text-align: center;
+    margin-bottom: 1.2em;
+}
+
+.stats-container span {
+    font-weight: 600;
+}
+
+.card-container {
+    position: relative;
+    width: 6.25em;
+    height: 6.25em;
+    cursor: pointer;
+}
+
+.card-before,
+.card-after {
+    position: absolute;
+    border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 4px solid #000000;
+    transition: transform 0.7s ease-out;
+    backface-visibility: hidden;
+}
+
+.card-before {
+    /* background-color: var(--color-green--light); */
+    background: linear-gradient(-45deg, #71FA32, #a6dee2, #009DE0);
+    font-size: 2.8em;
+    font-weight: 600;
+}
+
+.card-after {
+    background-color: #ffffff;
+    transform: rotateY(180deg);
+}
+
+.card-container.flipped .card-before {
+    transform: rotateY(180deg);
+}
+
+.card-container.flipped .card-after {
+    transform: rotateY(0deg);
+}
+
+.controls-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    /* background-color: var(--color-green--light); */
+    background-image: linear-gradient(135deg, #71FA32, #009DE0) ;
+    top: 0;
+}
+
+button {
+    border: none;
+    border-radius: 0.3em;
+    padding: 1em 1.5em;
+    cursor: pointer;
+}
+
+#stop {
+    font-size: 1.1em;
+    display: block;
+    margin: 1.1em auto 0 auto;
+    background-color: #000000;
+    color: #ffffff;
+}
+
+.controls-container button {
+    font-size: 1.3em;
+    box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2);
+}
+
+.hide {
+    display: none;
+}
+
+#result {
+    text-align: center;
+}
+
+#result h2 {
+    font-size: 2.5em;
+}
+
+#result h4 {
+    font-size: 1.8em;
+    margin: 0.6em 0 1em 0;
+}

src/Games/Memory_Card_Game/memoryCard.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import './memoryCard.css';
+
+class memoryCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      movesCount: 0,
+      seconds: 0,
+      minutes: 0,
+      winCount: 0,
+      cards: [],
+      firstCard: null,
+      secondCard: null,
+      interval: null,
+    };
+  }
+
+  componentDidMount() {
+    this.initializeGame();
+  }
+
+  initializeGame = () => {
+    const cardValues = this.generateRandom();
+    this.matrixGenerator(cardValues);
+  };
+
+  generateRandom = (size = 4) => {
+    const items = [
+      { name: 'bee', image: './images/bee.png' },
+      { name: 'crocodile', image: './images/crocodile.png' },
+      { name: 'macaw', image: './images/macaw.png' },
+      { name: 'gorilla', image: './images/gorilla.png' },
+      { name: 'tiger', image: './images/tiger.png' },
+      { name: 'monkey', image: './images/monkey.png' },
+      { name: 'chameleon', image: './images/chameleon.png' },
+      { name: 'piranha', image: './images/piranha.png' },
+      { name: 'anaconda', image: './images/anaconda.png' },
+      { name: 'sloth', image: './images/sloth.png' },
+      { name: 'cockatoo', image: './images/cockatoo.png' },
+      { name: 'toucan', image: './images/toucan.png' },
+    ];
+
+    let tempArray = [...items];
+    let cardValues = [];
+
+    size = (size * size) / 2;
+
+    for (let i = 0; i < size; i++) {
+      const randomIndex = Math.floor(Math.random() * tempArray.length);
+      cardValues.push(tempArray[randomIndex]);
+      tempArray.splice(randomIndex, 1);
+    }
+
+    return cardValues;
+  };
+
+  matrixGenerator = (cardValues, size = 4) => {
+    this.setState({ cards: [] }, () => {
+      const gameContainer = document.querySelector('.game-container');
+      gameContainer.innerHTML = '';
+
+      cardValues = [...cardValues, ...cardValues];
+      cardValues.sort(() => Math.random() - 0.5);
+
+      for (let i = 0; i < size * size; i++) {
+        const card = cardValues[i];
+        const cardContainer = document.createElement('div');
+        cardContainer.className = 'card-container';
+        cardContainer.dataset.cardValue = card.name;
+
+        const cardBefore = document.createElement('div');
+        cardBefore.className = 'card-before';
+        cardBefore.innerHTML = '?';
+
+        const cardAfter = document.createElement('div');
+        cardAfter.className = 'card-after';
+
+        const cardImage = document.createElement('img');
+        cardImage.src = card.image;
+        cardImage.className = 'image';
+
+        cardAfter.appendChild(cardImage);
+        cardContainer.appendChild(cardBefore);
+        cardContainer.appendChild(cardAfter);
+
+        gameContainer.appendChild(cardContainer);
+      }
+
+      gameContainer.style.gridTemplateColumns = `repeat(${size}, auto)`;
+
+      const cards = document.querySelectorAll('.card-container');
+      cards.forEach((card) => {
+        card.addEventListener('click', () => {
+          this.cardClickHandler(card);
+        });
+      });
+
+      this.setState({ cards });
+    });
+  };
+
+  cardClickHandler = (card) => {
+    const { firstCard, secondCard, movesCount, winCount } = this.state;
+
+    if (!card.classList.contains('matched')) {
+      card.classList.add('flipped');
+
+      if (!firstCard) {
+        this.setState({ firstCard: card });
+      } else {
+        this.setState({ secondCard: card });
+        this.movesCounter();
+
+        const firstCardValue = firstCard.getAttribute('data-card-value');
+        const secondCardValue = card.getAttribute('data-card-value');
+
+        if (firstCardValue === secondCardValue) {
+          firstCard.classList.add('matched');
+          card.classList.add('matched');
+
+          this.setState(
+            (prevState) => ({ winCount: prevState.winCount + 1 }),
+            () => {
+              const { winCount, cards } = this.state;
+              if (winCount === Math.floor(cards.length / 2)) {
+                this.stopGame();
+              }
+            }
+          );
+        } else {
+          const tempFirst = firstCard;
+          const tempSecond = card;
+
+          setTimeout(() => {
+            tempFirst.classList.remove('flipped');
+            tempSecond.classList.remove('flipped');
+          }, 900);
+        }
+
+        this.setState({ firstCard: null, secondCard: null });
+      }
+    }
+  };
+
+  movesCounter = () => {
+    this.setState((prevState) => ({ movesCount: prevState.movesCount + 1 }));
+  };
+
+  timeGenerator = () => {
+    this.setState((prevState) => {
+      let { seconds, minutes } = prevState;
+
+      seconds += 1;
+
+      if (seconds >= 60) {
+        minutes += 1;
+        seconds = 0;
+      }
+
+      return { seconds, minutes };
+    });
+  };
+
+  startGame = () => {
+    this.setState(
+      { movesCount: 0, seconds: 0, minutes: 0, winCount: 0 },
+      () => {
+        this.initializeGame();
+        this.setState({
+          interval: setInterval(this.timeGenerator, 1000),
+        });
+      }
+    );
+  };
+
+  stopGame = () => {
+    clearInterval(this.state.interval);
+  };
+
+  render() {
+    const { movesCount, minutes, seconds } = this.state;
+
+    return (
+      <div className="memoryCard">
+        <div className="wrapper">
+          <div className="stats-container">
+            <div id="moves-count">
+              <span>Moves:</span> {movesCount}
+            </div>
+            <div id="time">
+              <span>Time:</span> {minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+            </div>
+          </div>
+          <div className="game-container"></div>
+          <button id="stop" className="hide" onClick={this.stopGame}>
+            Stop Game
+          </button>
+        </div>
+
+        <div className="controls-container">
+          <p id="result"></p>
+          <button id="start" onClick={this.startGame}>
+            Start Game
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default memoryCard;