diff --git a/src/Games/Memory_Card_Game/README.md b/src/Games/Memory_Card_Game/README.md new file mode 100644 index 000000000..bcb31594f --- /dev/null +++ b/src/Games/Memory_Card_Game/README.md @@ -0,0 +1,46 @@ +# **MEMORY CARD GAME** + +--- + +
+ +## **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. + +
+ +## **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. + +
+ +## **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๐Ÿ˜‰!! + +
+ +## **Screenshots ๐Ÿ“ธ** + +![image](https://github.com/ssitvit/Games-and-Go/assets/114330097/65945e05-1ed9-42f5-bebc-53a123b8ab03) + +
+ +## **Creator ๐Ÿ‘ฆ** + +[Avdhesh Varshney](https://github.com/Avdhesh-Varshney) + +
+ +### **Thanks for using this game** + diff --git a/src/Games/Memory_Card_Game/images/anaconda.png b/src/Games/Memory_Card_Game/images/anaconda.png new file mode 100644 index 000000000..15ec55f0e Binary files /dev/null and b/src/Games/Memory_Card_Game/images/anaconda.png differ diff --git a/src/Games/Memory_Card_Game/images/bee.png b/src/Games/Memory_Card_Game/images/bee.png new file mode 100644 index 000000000..83d6d826e Binary files /dev/null and b/src/Games/Memory_Card_Game/images/bee.png differ diff --git a/src/Games/Memory_Card_Game/images/chameleon.png b/src/Games/Memory_Card_Game/images/chameleon.png new file mode 100644 index 000000000..d08efbba0 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/chameleon.png differ diff --git a/src/Games/Memory_Card_Game/images/cockatoo.png b/src/Games/Memory_Card_Game/images/cockatoo.png new file mode 100644 index 000000000..d51efee73 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/cockatoo.png differ diff --git a/src/Games/Memory_Card_Game/images/crocodile.png b/src/Games/Memory_Card_Game/images/crocodile.png new file mode 100644 index 000000000..3c1c298e5 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/crocodile.png differ diff --git a/src/Games/Memory_Card_Game/images/gorilla.png b/src/Games/Memory_Card_Game/images/gorilla.png new file mode 100644 index 000000000..e6d67357d Binary files /dev/null and b/src/Games/Memory_Card_Game/images/gorilla.png differ diff --git a/src/Games/Memory_Card_Game/images/macaw.png b/src/Games/Memory_Card_Game/images/macaw.png new file mode 100644 index 000000000..63558d650 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/macaw.png differ diff --git a/src/Games/Memory_Card_Game/images/monkey.png b/src/Games/Memory_Card_Game/images/monkey.png new file mode 100644 index 000000000..e3bd67810 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/monkey.png differ diff --git a/src/Games/Memory_Card_Game/images/piranha.png b/src/Games/Memory_Card_Game/images/piranha.png new file mode 100644 index 000000000..2fa2093cc Binary files /dev/null and b/src/Games/Memory_Card_Game/images/piranha.png differ diff --git a/src/Games/Memory_Card_Game/images/sloth.png b/src/Games/Memory_Card_Game/images/sloth.png new file mode 100644 index 000000000..be3748774 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/sloth.png differ diff --git a/src/Games/Memory_Card_Game/images/tiger.png b/src/Games/Memory_Card_Game/images/tiger.png new file mode 100644 index 000000000..4f20d2a6f Binary files /dev/null and b/src/Games/Memory_Card_Game/images/tiger.png differ diff --git a/src/Games/Memory_Card_Game/images/toucan.png b/src/Games/Memory_Card_Game/images/toucan.png new file mode 100644 index 000000000..6f3b1f9a2 Binary files /dev/null and b/src/Games/Memory_Card_Game/images/toucan.png differ diff --git a/src/Games/Memory_Card_Game/memoryCard.css b/src/Games/Memory_Card_Game/memoryCard.css new file mode 100644 index 000000000..007b511c0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Games/Memory_Card_Game/memoryCard.js b/src/Games/Memory_Card_Game/memoryCard.js new file mode 100644 index 000000000..e489ad84c --- /dev/null +++ b/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 ( +
+
+
+
+ Moves: {movesCount} +
+
+ Time: {minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds} +
+
+
+ +
+ +
+

+ +
+
+ ); + } +} + +export default memoryCard; diff --git a/src/Homepage/Data/data.js b/src/Homepage/Data/data.js index 089f39e5c..e5a4ecae0 100644 --- a/src/Homepage/Data/data.js +++ b/src/Homepage/Data/data.js @@ -350,7 +350,7 @@ export const data1 = [ step2: "2. you have the winner" }, { - serial_number: "33", + serial_number: "32", main_heading: "word Scramble", about: "Use keyboard to play the game", link_game: "/wordScramble", @@ -359,5 +359,16 @@ export const data1 = [ step1: "1. Type in your guess.", step2: "2. Get three correct words and level will increase. Get a word wrong three times and game will restart.", step3: "3. Finish level 3 and you win.", + }, + { + serial_number: "33", + main_heading: "Memory Card Game", + about: "Watch, Learn and Conquer the game.", + link_game: "/Memory_Card_Game", + // Flip-card-back contents + rule_heading: "Rules to play", + step1: "1. Memories box where pictures appears", + step2: "2. Click on box which you remember", + step3: "3. Enjoy the game", } ]; diff --git a/src/Routes/AllRoutes.js b/src/Routes/AllRoutes.js index 5356bb6d4..50ec32f2c 100644 --- a/src/Routes/AllRoutes.js +++ b/src/Routes/AllRoutes.js @@ -11,6 +11,7 @@ const Ninetynine = lazy(() => import("../Games/Ninetynine/ninetynine")); const Memory = lazy(() => import("../Games/Memory/memory")); const TriviaGame = lazy(() => import("../Games/Trivia/quiz")); const Fifteenpuzzle = lazy(() => import("../Games/15Puzzle/Fifteenpuzzle")); +const memoryCard = lazy(() => import("../Games/Memory_Card_Game/memoryCard")); const RockPaperScissors = lazy(() => import("../Games/RockPaperScissors/RockPaperScissors") ); @@ -97,6 +98,7 @@ function AllRoutes() { }/> }/> }/> + } />