Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7f2df9

Browse files
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

Lines changed: 29 additions & 0 deletions
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

Lines changed: 29 additions & 0 deletions
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

Lines changed: 128 additions & 0 deletions
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

Lines changed: 84 additions & 0 deletions
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+
}
458 KB
Loading[フレーム]

‎index.html

Lines changed: 14 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /