diff --git a/Games/Recall_rush/README.md b/Games/Recall_rush/README.md new file mode 100644 index 0000000000..7ac7d3a6ed --- /dev/null +++ b/Games/Recall_rush/README.md @@ -0,0 +1,29 @@ +# Recall Rush + +Recall Rush is a memory card game where players flip cards to find matching pairs. The game is built using HTML, CSS, and JavaScript, providing a user-friendly interface with a timer, move counter, and a reset button. + +## Features + +- **Dynamic Card Generation**: The cards are dynamically generated and shuffled for each game. +- **Timer**: Keeps track of the time taken to complete the game. +- **Move Counter**: Counts the number of moves made by the player. +- **Reset Button**: Allows the player to reset the game at any time. +- **Smooth Animations**: Provides a visually appealing experience with flip animations. +- **Responsive Design**: The game is responsive and can be played on both desktop and mobile devices. +- **Gradient Color Theme**: Utilizes a gradient color theme for a vibrant look. + +## Game Logic + +1. The game board consists of 16 cards, with 8 unique values, each appearing twice. +2. Players click on a card to flip it and reveal its value. +3. The goal is to find all matching pairs of cards with the least number of moves. +4. If two cards match, they remain flipped. If not, they are flipped back over after a short delay. +5. The game ends when all pairs are found. + +## Getting Started + +To run the game locally: + +1. Clone the repository: + ```bash + git clone https://github.com/your-username/recall-rush.git diff --git a/Games/Recall_rush/index.html b/Games/Recall_rush/index.html new file mode 100644 index 0000000000..71c09b0d49 --- /dev/null +++ b/Games/Recall_rush/index.html @@ -0,0 +1,25 @@ + + + + + + Recall Rush + + + +
+
+

Recall Rush

+
+
Time: 0
+
Moves: 0
+
+
+
+ +
+ +
+ + + diff --git a/Games/Recall_rush/script.js b/Games/Recall_rush/script.js new file mode 100644 index 0000000000..4cee6ffbe7 --- /dev/null +++ b/Games/Recall_rush/script.js @@ -0,0 +1,114 @@ +const gameBoard = document.getElementById('game-board'); +const timerDisplay = document.getElementById('timer'); +const movesDisplay = document.getElementById('moves'); +const resetBtn = document.getElementById('reset-btn'); + +let cards = []; +let firstCard, secondCard; +let hasFlippedCard = false; +let lockBoard = false; +let moves = 0; +let timer; +let seconds = 0; + +const cardValues = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H']; + +// Shuffle the card values +cardValues.sort(() => 0.5 - Math.random()); + +function createBoard() { + cardValues.forEach(value => { + const card = document.createElement('div'); + card.classList.add('card'); + card.dataset.value = value; + + const frontFace = document.createElement('div'); + frontFace.classList.add('front'); + frontFace.textContent = value; + + const backFace = document.createElement('div'); + backFace.classList.add('back'); + backFace.textContent = '?'; + + card.appendChild(frontFace); + card.appendChild(backFace); + + card.addEventListener('click', flipCard); + gameBoard.appendChild(card); + cards.push(card); + }); +} + +function flipCard() { + if (lockBoard || this === firstCard) return; + this.classList.add('flip'); + + if (!hasFlippedCard) { + hasFlippedCard = true; + firstCard = this; + } else { + hasFlippedCard = false; + secondCard = this; + checkForMatch(); + } +} + +function checkForMatch() { + if (firstCard.dataset.value === secondCard.dataset.value) { + disableCards(); + } else { + unflipCards(); + } + moves++; + movesDisplay.textContent = `Moves: ${moves}`; +} + +function disableCards() { + firstCard.removeEventListener('click', flipCard); + secondCard.removeEventListener('click', flipCard); + resetBoard(); +} + +function unflipCards() { + lockBoard = true; + setTimeout(() => { + firstCard.classList.remove('flip'); + secondCard.classList.remove('flip'); + resetBoard(); + }, 1500); +} + +function resetBoard() { + [hasFlippedCard, lockBoard] = [false, false]; + [firstCard, secondCard] = [null, null]; +} + +function startTimer() { + timer = setInterval(() => { + seconds++; + timerDisplay.textContent = `Time: ${seconds}`; + }, 1000); +} + +function resetGame() { + clearInterval(timer); + timer = null; + seconds = 0; + moves = 0; + timerDisplay.textContent = `Time: ${seconds}`; + movesDisplay.textContent = `Moves: ${moves}`; + cards.forEach(card => { + card.classList.remove('flip'); + card.addEventListener('click', flipCard); + }); + cards = []; + gameBoard.innerHTML = ''; + setTimeout(createBoard, 500); + startTimer(); +} + +resetBtn.addEventListener('click', resetGame); + +// Start the game +createBoard(); +startTimer(); diff --git a/Games/Recall_rush/style.css b/Games/Recall_rush/style.css new file mode 100644 index 0000000000..a643af22b1 --- /dev/null +++ b/Games/Recall_rush/style.css @@ -0,0 +1,83 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: #f8f9fa; +} + +.game-container { + text-align: center; +} + +.header { + margin-bottom: 20px; +} + +.stats { + display: flex; + justify-content: center; + gap: 20px; + font-size: 20px; +} + +.game-board { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-template-rows: repeat(4, 100px); + gap: 10px; + justify-content: center; + align-items: center; +} + +.card { + width: 100px; + height: 100px; + background: linear-gradient(135deg, #ffa726, #ff7043); + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + color: white; + cursor: pointer; + border-radius: 10px; + position: relative; + transform-style: preserve-3d; + 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; + border-radius: 10px; +} + +.card .back { + transform: rotateY(180deg); + background: white; + color: #ffa726; + font-size: 40px; +} + +#reset-btn { + margin-top: 20px; + padding: 10px 20px; + font-size: 16px; + background: linear-gradient(135deg, #ff7043, #ffa726); + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} diff --git a/README.md b/README.md index fadd81de9b..8e79d438b7 100644 --- a/README.md +++ b/README.md @@ -1321,7 +1321,7 @@ This repository also provides one such platforms where contributers come over an |[Five_Nights_at_Freddys](https://github.com/kunjgit/GameZone/tree/main/Games/Five_Nights_at_Freddys)| |[Snake_Gun_Water](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Gun_Water)| |[Tether](https://github.com/kunjgit/GameZone/tree/main/Games/Tether)| - +| [recall_rush](https://github.com/kunjgit/GameZone/tree/main/Games/Recall_rush) | diff --git a/assets/images/recall_rush.png b/assets/images/recall_rush.png new file mode 100644 index 0000000000..b73a3940bd Binary files /dev/null and b/assets/images/recall_rush.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index 50bd9b7eee..a33bf7ed93 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -3150,4 +3150,9 @@ "gameTitle" : "Atlas Game", "gameUrl": "Atlas_Game", "thumbnailUrl": "Atlas_Game.png" - }, + },"629":{ + "gameTitle": "Recall_rush", + "gameUrl": "recall_rush", + "thumbnailUrl": "recall_rush.png" + } +}