diff --git a/Games/Memory Flip/README.md b/Games/Memory Flip/README.md new file mode 100644 index 0000000000..8f0e9ee37f --- /dev/null +++ b/Games/Memory Flip/README.md @@ -0,0 +1,50 @@ +# Memory Flip Game + +This is a simple memory flip game created using HTML, CSS, and JavaScript. The objective of the game is to find all matching pairs of cards by flipping them two at a time. + +## Features + +- Simple and intuitive user interface +- Dynamic card generation and shuffling +- Smooth card flipping animations +- Matching pairs detection + +## How to Play + +1. Open the game in a web browser. +2. Click on any card to flip it and reveal its content. +3. Click on another card to try and find its matching pair. +4. If the two flipped cards match, they will remain revealed. +5. If the two flipped cards do not match, they will be flipped back after a short delay. +6. Continue flipping cards to find all matching pairs. + +## Getting Started + +To run the game locally, follow these steps: + +1. Clone the repository or download the source code. +2. Open the `index.html` file in your preferred web browser. + +## Files + +- `index.html`: The main HTML file containing the structure of the game. +- `styles.css`: The CSS file for styling the game board and cards. +- `script.js`: The JavaScript file containing the game logic and functionality. + +## Customization + +You can customize the game by modifying the `cardsArray` in the `script.js` file to include different card values or images. + +## Example + +```javascript +const cardsArray = [ + { name: 'A', img: 'A' }, + { name: 'B', img: 'B' }, + { name: 'C', img: 'C' }, + { name: 'D', img: 'D' }, + { name: 'E', img: 'E' }, + { name: 'F', img: 'F' }, + { name: 'G', img: 'G' }, + { name: 'H', img: 'H' } +]; diff --git a/Games/Memory Flip/index.html b/Games/Memory Flip/index.html new file mode 100644 index 0000000000..70faa676c7 --- /dev/null +++ b/Games/Memory Flip/index.html @@ -0,0 +1,17 @@ + + + + + + Memory Flip Game + + + +
+
+ +
+
+ + + diff --git a/Games/Memory Flip/script.js b/Games/Memory Flip/script.js new file mode 100644 index 0000000000..3a2817e209 --- /dev/null +++ b/Games/Memory Flip/script.js @@ -0,0 +1,87 @@ +// script.js + +const cardsArray = [ + { name: 'A', img: 'A' }, + { name: 'B', img: 'B' }, + { name: 'C', img: 'C' }, + { name: 'D', img: 'D' }, + { name: 'E', img: 'E' }, + { name: 'F', img: 'F' }, + { name: 'G', img: 'G' }, + { name: 'H', img: 'H' } +]; + +// Duplicate the cards array to create pairs +const gameCards = cardsArray.concat(cardsArray); +gameCards.sort(() => 0.5 - Math.random()); // Shuffle the cards + +const gameBoard = document.getElementById('game-board'); + +let firstCard = null; +let secondCard = null; +let lockBoard = false; + +gameCards.forEach(card => { + const cardElement = document.createElement('div'); + cardElement.classList.add('card'); + cardElement.dataset.name = card.name; + + const frontFace = document.createElement('div'); + frontFace.classList.add('front'); + frontFace.textContent = card.img; + + const backFace = document.createElement('div'); + backFace.classList.add('back'); + backFace.textContent = '?'; + + cardElement.appendChild(frontFace); + cardElement.appendChild(backFace); + + cardElement.addEventListener('click', flipCard); + + gameBoard.appendChild(cardElement); +}); + +function flipCard() { + if (lockBoard) return; + if (this === firstCard) return; + + this.classList.add('flip'); + + if (!firstCard) { + firstCard = this; + return; + } + + secondCard = this; + lockBoard = true; + + checkForMatch(); +} + +function checkForMatch() { + const isMatch = firstCard.dataset.name === secondCard.dataset.name; + + isMatch ? disableCards() : unflipCards(); +} + +function disableCards() { + firstCard.removeEventListener('click', flipCard); + secondCard.removeEventListener('click', flipCard); + + resetBoard(); +} + +function unflipCards() { + setTimeout(() => { + firstCard.classList.remove('flip'); + secondCard.classList.remove('flip'); + + resetBoard(); + }, 1000); +} + +function resetBoard() { + [firstCard, secondCard] = [null, null]; + lockBoard = false; +} diff --git a/Games/Memory Flip/styles.css b/Games/Memory Flip/styles.css new file mode 100644 index 0000000000..543963b583 --- /dev/null +++ b/Games/Memory Flip/styles.css @@ -0,0 +1,64 @@ +/* styles.css */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; + margin: 0; + font-family: Arial, sans-serif; +} + +.game-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.game-board { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-gap: 10px; +} + +.card { + width: 100px; + height: 100px; + background-color: #333; + color: white; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + cursor: pointer; + position: relative; + transform: rotateY(0deg); + transition: transform 0.5s; +} + +.card.flip { + transform: rotateY(180deg); +} + +.card .front, +.card .back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +.card .front { + background-color: #f9f9f9; + color: #333; +} + +.card .back { + background-color: #333; + color: white; + transform: rotateY(180deg); +} diff --git a/README.md b/README.md index 48b5bd6a9d..fd48417567 100644 --- a/README.md +++ b/README.md @@ -358,6 +358,9 @@ This repository also provides one such platforms where contributers come over an | [Alien_Invasion](https://github.com/kunjgit/GameZone/tree/main/Games/Alien_Invasion) | | [Drawing_App](https://github.com/kunjgit/GameZone/tree/main/Games/Drawing_app) | | [Dodge_the_Blocks](https://github.com/kunjgit/GameZone/tree/main/Games/Dodge_the_Blocks) | + +| [Memory_Flip](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Flip) | + |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)| | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) | |[Color Swap](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Swap)| diff --git a/assets/images/Memory_Flip.png b/assets/images/Memory_Flip.png new file mode 100644 index 0000000000..2f9fef0a7b Binary files /dev/null and b/assets/images/Memory_Flip.png differ