Skip to content

Commit f7f2df9

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1808 from tanyagupta01/reverse-memory-game
Added reverse memory game
2 parents c1dfd77 + 5bddfb4 commit f7f2df9

File tree

6 files changed

+284
-0
lines changed

6 files changed

+284
-0
lines changed

‎123-Reverse Memory Game/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Reverse Memory Game
2+
3+
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.
4+
5+
## How to Play
6+
7+
1. **Select Grid Size**: Choose the grid size (3x3, 4x4, 5x5, or 6x6) from the dropdown menu.
8+
2. **Start Game**: Click the "Start Game" button to begin.
9+
3. **Memorize Colors**: A color will briefly appear on one of the grid squares. Memorize its position.
10+
4. **Recall Sequence**: After the color disappears, click the grid squares in the reverse order of the sequence shown.
11+
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.
12+
6. **Game Over**: If you select the wrong grid square, the game will end and prompt you to try again.
13+
14+
## Features
15+
16+
- **Reverse Memory**: Recall colors in reverse order for a unique challenge.
17+
- **Level Up System**: Sequence length increases with each correct recall.
18+
- **Customizable Grid Size**: Choose from 3x3, 4x4, 5x5, or 6x6 grid sizes.
19+
- **Simple Interface**: Easy to learn with a familiar grid and vibrant colors.
20+
- **Feedback**: Visual cues for right and wrong answers to enhance engagement.
21+
22+
## Setup and Installation
23+
24+
1. **Clone the repository**:
25+
```sh
26+
git clone https://github.com/your-username/reverse-memory-game.git
27+
2. cd reverse-memory-game
28+
3. Run the HTML file in your Browser
29+
4. Play and make fun

‎123-Reverse Memory Game/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Reverse Memory Game</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div id="game-container">
11+
<h1>Reverse Memory Game</h1>
12+
<div id="controls">
13+
<label for="grid-size">Select Grid Size:</label>
14+
<select id="grid-size">
15+
<option value="3">3x3</option>
16+
<option value="4">4x4</option>
17+
<option value="5">5x5</option>
18+
<option value="6">6x6</option>
19+
</select>
20+
<button id="start-button">Start Game</button>
21+
</div>
22+
<div id="grid-container">
23+
<!-- Grid squares will be dynamically generated here -->
24+
</div>
25+
<p id="status"></p>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎123-Reverse Memory Game/script.js

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
const colors = ['#e57373', '#81c784', '#64b5f6', '#ffd54f', '#ba68c8', '#ff8a65'];
2+
let gridSize = 3;
3+
let sequence = [];
4+
let userSequence = [];
5+
let level = 0;
6+
7+
document.addEventListener('DOMContentLoaded', () => {
8+
const gridContainer = document.getElementById('grid-container');
9+
const startButton = document.getElementById('start-button');
10+
const gridSizeSelect = document.getElementById('grid-size');
11+
const status = document.getElementById('status');
12+
13+
// Start button click event
14+
startButton.addEventListener('click', startGame);
15+
16+
// Grid size change event
17+
gridSizeSelect.addEventListener('change', (e) => {
18+
gridSize = parseInt(e.target.value);
19+
createGrid();
20+
});
21+
22+
// Square click event
23+
gridContainer.addEventListener('click', (e) => {
24+
if (e.target.classList.contains('grid-square')) {
25+
handleSquareClick(e.target.dataset.index);
26+
}
27+
});
28+
29+
function createGrid() {
30+
gridContainer.innerHTML = '';
31+
gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 100px)`;
32+
for (let i = 0; i < gridSize * gridSize; i++) {
33+
const square = document.createElement('div');
34+
square.classList.add('grid-square');
35+
square.dataset.index = i;
36+
gridContainer.appendChild(square);
37+
}
38+
}
39+
40+
function startGame() {
41+
level = 0;
42+
sequence = [];
43+
userSequence = [];
44+
status.textContent = 'Game started!';
45+
nextLevel();
46+
}
47+
48+
function nextLevel() {
49+
level++;
50+
userSequence = [];
51+
const randomSquare = Math.floor(Math.random() * gridSize * gridSize);
52+
const newColor = colors[Math.floor(Math.random() * colors.length)];
53+
sequence.push({ index: randomSquare, color: newColor });
54+
displaySequence();
55+
}
56+
57+
function displaySequence() {
58+
let i = 0;
59+
const interval = setInterval(() => {
60+
const squareData = sequence[i];
61+
const square = document.querySelector(`[data-index='${squareData.index}']`);
62+
showColor(square, squareData.color);
63+
i++;
64+
if (i >= sequence.length) {
65+
clearInterval(interval);
66+
}
67+
}, 1000);
68+
}
69+
70+
function showColor(square, color) {
71+
const originalColor = square.style.backgroundColor;
72+
square.style.backgroundColor = color;
73+
setTimeout(() => {
74+
square.style.backgroundColor = originalColor;
75+
}, 500);
76+
}
77+
78+
function handleSquareClick(index) {
79+
if (userSequence.length < sequence.length) {
80+
const square = document.querySelector(`[data-index='${index}']`);
81+
const squareData = sequence[sequence.length - userSequence.length - 1];
82+
showColor(square, squareData.color);
83+
userSequence.push({ index: parseInt(index), color: squareData.color });
84+
85+
// Check the sequence after each click
86+
if (!checkPartialSequence()) {
87+
status.textContent = 'Wrong! Try again.';
88+
resetGame();
89+
return;
90+
}
91+
92+
// If the full sequence is entered, validate it
93+
if (userSequence.length === sequence.length) {
94+
if (checkSequence()) {
95+
status.textContent = 'Correct! Next level...';
96+
setTimeout(nextLevel, 1000);
97+
} else {
98+
status.textContent = 'Wrong! Try again.';
99+
resetGame();
100+
}
101+
}
102+
}
103+
}
104+
105+
function checkPartialSequence() {
106+
// Check the user sequence against the reversed sequence up to the current length
107+
for (let i = 0; i < userSequence.length; i++) {
108+
if (userSequence[i].index !== sequence[sequence.length - 1 - i].index) {
109+
return false;
110+
}
111+
}
112+
return true;
113+
}
114+
115+
function checkSequence() {
116+
// Check if the entire user sequence matches the reversed game sequence
117+
return userSequence.every((data, index) => data.index === sequence[sequence.length - 1 - index].index);
118+
}
119+
120+
function resetGame() {
121+
sequence = [];
122+
userSequence = [];
123+
level = 0;
124+
}
125+
126+
// Create the initial grid
127+
createGrid();
128+
});

‎123-Reverse Memory Game/styles.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
body {
4+
font-family: 'Roboto', sans-serif;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
11+
}
12+
13+
#game-container {
14+
text-align: center;
15+
background-color: rgba(255, 255, 255, 0.9);
16+
padding: 20px;
17+
border-radius: 15px;
18+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
19+
}
20+
21+
h1 {
22+
color: #333;
23+
margin-bottom: 20px;
24+
}
25+
26+
#controls {
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
margin-bottom: 20px;
31+
}
32+
33+
#grid-size {
34+
margin-left: 10px;
35+
padding: 5px;
36+
font-size: 16px;
37+
border-radius: 5px;
38+
border: 1px solid #ccc;
39+
}
40+
41+
#grid-container {
42+
display: grid;
43+
grid-gap: 10px;
44+
margin: 20px auto;
45+
}
46+
47+
.grid-square {
48+
width: 100px;
49+
height: 100px;
50+
background-color: #ddd;
51+
border: 2px solid #ccc;
52+
cursor: pointer;
53+
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
54+
border-radius: 10px;
55+
}
56+
57+
.grid-square:hover {
58+
transform: scale(1.1);
59+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
60+
}
61+
62+
#start-button {
63+
padding: 10px 20px;
64+
font-size: 16px;
65+
cursor: pointer;
66+
background-color: #333;
67+
color: white;
68+
border: none;
69+
border-radius: 10px;
70+
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
71+
margin-left: 10px;
72+
}
73+
74+
#start-button:hover {
75+
background-color: #555;
76+
transform: scale(1.1);
77+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
78+
}
79+
80+
#status {
81+
margin-top: 20px;
82+
font-size: 18px;
83+
color: #333;
84+
}

‎30DaysOfJavaScript/assets/123-Reverse Memory Game.png

458 KB
Loading

‎index.html

+14
Original file line numberDiff line numberDiff line change
@@ -1963,6 +1963,20 @@ <h4>Arcade Game</h4>
19631963
A pure CSS game where the user controls a stack of blocks by clicking and dragging the mouse.
19641964
</p>
19651965
</div>
1966+
1967+
<div class="maincard">
1968+
<div class="card1">
1969+
<img src="30DaysOfJavaScript/assets/123-Reverse Memory Game.png" alt="Reverse Memory Game">
1970+
</div>
1971+
<div class="card">
1972+
<h4>Reverse Memory Game</h4>
1973+
<p>
1974+
A fun and challenging memory game where you must recall a sequence of colors in reverse order.
1975+
</p>
1976+
<a href="123-Reverse Memory Game/index.html" target="_blank"><button class="button">Live</button></a>
1977+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/123-Reverse%20Memory%20Game" target="_blank"><button class="button">Github</button></a>
1978+
</div>
1979+
</div>
19661980
</div>
19671981

19681982

0 commit comments

Comments
 (0)