swapnilsparsh · swapnilsparsh · Jun 20, 2024 · Jun 17, 2024 · Jun 19, 2024 · Jun 20, 2024
diff --git a/123-Reverse Memory Game/README.md b/123-Reverse Memory Game/README.md
@@ -0,0 +1,29 @@
+# Reverse Memory Game
+
+The Reverse Memory Game is a fun and challenging memory game where you must recall a sequence of colors in reverse order. With each successful recall, the sequence length increases, making the game progressively harder.
+
+## How to Play
+
+1. **Select Grid Size**: Choose the grid size (3x3, 4x4, 5x5, or 6x6) from the dropdown menu.
+2. **Start Game**: Click the "Start Game" button to begin.
+3. **Memorize Colors**: A color will briefly appear on one of the grid squares. Memorize its position.
+4. **Recall Sequence**: After the color disappears, click the grid squares in the reverse order of the sequence shown.
+5. **Level Up**: If you recall the sequence correctly, a new color will be added to the sequence. Continue to recall the sequence in reverse order as the length increases.
+6. **Game Over**: If you select the wrong grid square, the game will end and prompt you to try again.
+
+## Features
+
+- **Reverse Memory**: Recall colors in reverse order for a unique challenge.
+- **Level Up System**: Sequence length increases with each correct recall.
+- **Customizable Grid Size**: Choose from 3x3, 4x4, 5x5, or 6x6 grid sizes.
+- **Simple Interface**: Easy to learn with a familiar grid and vibrant colors.
+- **Feedback**: Visual cues for right and wrong answers to enhance engagement.
+
+## Setup and Installation
+
+1. **Clone the repository**:
+ ```sh
+ git clone https://github.com/your-username/reverse-memory-game.git
+2. cd reverse-memory-game
+3. Run the HTML file in your Browser
+4. Play and make fun
diff --git a/123-Reverse Memory Game/index.html b/123-Reverse Memory Game/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Reverse Memory Game</title>
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <div id="game-container">
+ <h1>Reverse Memory Game</h1>
+ <div id="controls">
+ <label for="grid-size">Select Grid Size:</label>
+ <select id="grid-size">
+ <option value="3">3x3</option>
+ <option value="4">4x4</option>
+ <option value="5">5x5</option>
+ <option value="6">6x6</option>
+ </select>
+ <button id="start-button">Start Game</button>
+ </div>
+ <div id="grid-container">
+ <!-- Grid squares will be dynamically generated here -->
+ </div>
+ <p id="status"></p>
+ </div>
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/123-Reverse Memory Game/script.js b/123-Reverse Memory Game/script.js
@@ -0,0 +1,128 @@
+const colors = ['#e57373', '#81c784', '#64b5f6', '#ffd54f', '#ba68c8', '#ff8a65'];
+let gridSize = 3;
+let sequence = [];
+let userSequence = [];
+let level = 0;
+
+document.addEventListener('DOMContentLoaded', () => {
+ const gridContainer = document.getElementById('grid-container');
+ const startButton = document.getElementById('start-button');
+ const gridSizeSelect = document.getElementById('grid-size');
+ const status = document.getElementById('status');
+
+ // Start button click event
+ startButton.addEventListener('click', startGame);
+
+ // Grid size change event
+ gridSizeSelect.addEventListener('change', (e) => {
+ gridSize = parseInt(e.target.value);
+ createGrid();
+ });
+
+ // Square click event
+ gridContainer.addEventListener('click', (e) => {
+ if (e.target.classList.contains('grid-square')) {
+ handleSquareClick(e.target.dataset.index);
+ }
+ });
+
+ function createGrid() {
+ gridContainer.innerHTML = '';
+ gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 100px)`;
+ for (let i = 0; i < gridSize * gridSize; i++) {
+ const square = document.createElement('div');
+ square.classList.add('grid-square');
+ square.dataset.index = i;
+ gridContainer.appendChild(square);
+ }
+ }
+
+ function startGame() {
+ level = 0;
+ sequence = [];
+ userSequence = [];
+ status.textContent = 'Game started!';
+ nextLevel();
+ }
+
+ function nextLevel() {
+ level++;
+ userSequence = [];
+ const randomSquare = Math.floor(Math.random() * gridSize * gridSize);
+ const newColor = colors[Math.floor(Math.random() * colors.length)];
+ sequence.push({ index: randomSquare, color: newColor });
+ displaySequence();
+ }
+
+ function displaySequence() {
+ let i = 0;
+ const interval = setInterval(() => {
+ const squareData = sequence[i];
+ const square = document.querySelector(`[data-index='${squareData.index}']`);
+ showColor(square, squareData.color);
+ i++;
+ if (i >= sequence.length) {
+ clearInterval(interval);
+ }
+ }, 1000);
+ }
+
+ function showColor(square, color) {
+ const originalColor = square.style.backgroundColor;
+ square.style.backgroundColor = color;
+ setTimeout(() => {
+ square.style.backgroundColor = originalColor;
+ }, 500);
+ }
+
+ function handleSquareClick(index) {
+ if (userSequence.length < sequence.length) {
+ const square = document.querySelector(`[data-index='${index}']`);
+ const squareData = sequence[sequence.length - userSequence.length - 1];
+ showColor(square, squareData.color);
+ userSequence.push({ index: parseInt(index), color: squareData.color });
+
+ // Check the sequence after each click
+ if (!checkPartialSequence()) {
+ status.textContent = 'Wrong! Try again.';
+ resetGame();
+ return;
+ }
+
+ // If the full sequence is entered, validate it
+ if (userSequence.length === sequence.length) {
+ if (checkSequence()) {
+ status.textContent = 'Correct! Next level...';
+ setTimeout(nextLevel, 1000);
+ } else {
+ status.textContent = 'Wrong! Try again.';
+ resetGame();
+ }
+ }
+ }
+ }
+
+ function checkPartialSequence() {
+ // Check the user sequence against the reversed sequence up to the current length
+ for (let i = 0; i < userSequence.length; i++) {
+ if (userSequence[i].index !== sequence[sequence.length - 1 - i].index) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ function checkSequence() {
+ // Check if the entire user sequence matches the reversed game sequence
+ return userSequence.every((data, index) => data.index === sequence[sequence.length - 1 - index].index);
+ }
+
+ function resetGame() {
+ sequence = [];
+ userSequence = [];
+ level = 0;
+ }
+
+ // Create the initial grid
+ createGrid();
+});
diff --git a/123-Reverse Memory Game/styles.css b/123-Reverse Memory Game/styles.css
@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+}
+
+#game-container {
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+ color: #333;
+ margin-bottom: 20px;
+}
+
+#controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+#grid-size {
+ margin-left: 10px;
+ padding: 5px;
+ font-size: 16px;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+}
+
+#grid-container {
+ display: grid;
+ grid-gap: 10px;
+ margin: 20px auto;
+}
+
+.grid-square {
+ width: 100px;
+ height: 100px;
+ background-color: #ddd;
+ border: 2px solid #ccc;
+ cursor: pointer;
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+ border-radius: 10px;
+}
+
+.grid-square:hover {
+ transform: scale(1.1);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+#start-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 10px;
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+ margin-left: 10px;
+}
+
+#start-button:hover {
+ background-color: #555;
+ transform: scale(1.1);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+#status {
+ margin-top: 20px;
+ font-size: 18px;
+ color: #333;
+}