Skip to content

Commit 3ada0bd

Browse files
Moiz-CodeByteMoiz-CodeByte
committed
Add a modal to display game over
1 parent 467b4ad commit 3ada0bd

File tree

4 files changed

+234
-2
lines changed

4 files changed

+234
-2
lines changed

‎Day #12 - 2048 Game/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ <h1>2048 Game</h1>
1919
<div id="score">Score: 0</div>
2020
</div>
2121
</div>
22+
23+
<!-- Game Over Modal -->
24+
<div id="game-over-modal" class="modal">
25+
<div class="modal-content">
26+
<h2>Game Over!</h2>
27+
<p>Your final score: <span id="final-score">0</span></p>
28+
<button id="restart-button">Play Again</button>
29+
</div>
30+
</div>
31+
2232
<script src="script.js"></script>
2333
</body>
2434
</html>

‎Day #12 - 2048 Game/readme.md

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,90 @@
1-
# 2048 Game
1+
# Day #12
2+
3+
# 2048 Game
4+
5+
## Table of Contents
6+
- [Introduction](#introduction)
7+
- [Features](#features)
8+
- [Getting Started](#getting-started)
9+
- [Usage](#usage)
10+
- [Contributing](#contributing)
11+
- [License](#license)
12+
- [Live Demo](#live-demo)
13+
14+
## Introduction
15+
The **2048 Game** is a classic sliding puzzle game implemented as a web application. The objective is to combine tiles with the same number to create a tile with the value of 2048. The game features a clean, responsive design that works well on both desktop and mobile devices.
16+
17+
## Features
18+
- Slide tiles in four directions using keyboard arrows or touch swipes
19+
- Merge tiles with the same number to create higher-value tiles
20+
- Score tracking as you progress through the game
21+
- Responsive design with optimized mobile experience
22+
- Attractive user interface with color-coded tiles
23+
- User-friendly game over modal with the option to restart
24+
- Touch support with swipe gestures for mobile devices
25+
26+
## Getting Started
27+
### Prerequisites
28+
To run the 2048 Game, you need a modern web browser.
29+
30+
### Installation
31+
1. Clone the repository:
32+
```bash
33+
git clone https://github.com/Moiz-CodeByte/100-days-of-javascript.git
34+
```
35+
2. Navigate to the project directory:
36+
```bash
37+
cd Day\ \#12\ -\ 2048\ Game
38+
```
39+
3. Open `index.html` in your web browser.
40+
41+
## Usage
42+
1. **Desktop Controls**:
43+
- Use arrow keys (←, →, ↑, ↓) to move tiles in the respective direction
44+
45+
2. **Mobile Controls**:
46+
- Swipe left, right, up, or down to move tiles in the respective direction
47+
48+
3. **Game Objective**:
49+
- Combine tiles with the same numbers to create a tile with the value of 2048
50+
- Tiles with the same number merge when they collide
51+
- After each move, a new tile with a value of 2 or 4 appears randomly on the board
52+
53+
4. **Game Over**:
54+
- The game ends when there are no more valid moves (the board is full and no adjacent tiles can be merged)
55+
- A game over modal will appear showing your final score
56+
- Click "Play Again" to restart the game
57+
58+
## Contributing
59+
Contributions are welcome! If you have any ideas, suggestions, or improvements, feel free to create a pull request or open an issue.
60+
61+
### Steps to Contribute
62+
1. Fork the repository.
63+
2. Create a new branch:
64+
```bash
65+
git checkout -b feature/your-feature-name
66+
```
67+
3. Make your changes and commit them:
68+
```bash
69+
git commit -m "Add your feature"
70+
```
71+
4. Push to the branch:
72+
```bash
73+
git push origin feature/your-feature-name
74+
```
75+
5. Open a pull request.
76+
77+
### After Opening a Pull Request
78+
1. **Review**: Address any feedback or change requests made by the reviewers.
79+
2. **Approval**: Wait for the pull request to be approved by the maintainers.
80+
3. **Merge**: Once approved, the pull request will be merged by a maintainer.
81+
4. **Close**: The pull request will be closed upon merging. If not merged, it might be closed manually with an explanation.
82+
5. **Cleanup**: Delete your feature branch after the pull request is merged and update your local repository.
83+
84+
## License
85+
This project is open-source and available under the [MIT License](LICENSE).
86+
87+
## Live Demo
88+
You can play the 2048 Game live at [Link](https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2312%20-%202048%20Game/)
89+
90+
For any questions or support, please contact at [[email protected]](mailto:[email protected]).

‎Day #12 - 2048 Game/script.js

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
const gridContainer = document.getElementById('grid-container');
22
const scoreContainer = document.getElementById('score');
3+
const gameOverModal = document.getElementById('game-over-modal');
4+
const finalScoreSpan = document.getElementById('final-score');
5+
const restartButton = document.getElementById('restart-button');
36
let score = 0;
47
let grid = [
58
[0, 0, 0, 0],
@@ -109,6 +112,31 @@ function isGameOver() {
109112
return true;
110113
}
111114

115+
function showGameOverModal() {
116+
finalScoreSpan.textContent = score;
117+
gameOverModal.classList.add('show');
118+
}
119+
120+
function resetGame() {
121+
// Reset the grid
122+
grid = [
123+
[0, 0, 0, 0],
124+
[0, 0, 0, 0],
125+
[0, 0, 0, 0],
126+
[0, 0, 0, 0]
127+
];
128+
129+
// Reset score
130+
score = 0;
131+
scoreContainer.textContent = `Score: ${score}`;
132+
133+
// Hide modal
134+
gameOverModal.classList.remove('show');
135+
136+
// Restart game
137+
initGame();
138+
}
139+
112140
function handleMove(keyCode) {
113141
let moved = false;
114142
if (keyCode === 37) moved = moveLeft();
@@ -119,7 +147,7 @@ function handleMove(keyCode) {
119147
generateRandom();
120148
createGrid();
121149
if (isGameOver()) {
122-
alert('Game Over!');
150+
showGameOverModal();
123151
}
124152
}
125153
}
@@ -194,3 +222,6 @@ function initGame() {
194222
}
195223

196224
initGame();
225+
226+
// Add event listener for restart button
227+
restartButton.addEventListener('click', resetGame);

‎Day #12 - 2048 Game/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,105 @@ h1 {
132132
font-size: 1.2rem;
133133
}
134134
}
135+
136+
/* Game Over Modal */
137+
.modal {
138+
display: none;
139+
position: fixed;
140+
z-index: 100;
141+
left: 0;
142+
top: 0;
143+
width: 100%;
144+
height: 100%;
145+
background-color: rgba(0, 0, 0, 0.7);
146+
justify-content: center;
147+
align-items: center;
148+
transition: all 0.3s ease;
149+
}
150+
151+
.modal.show {
152+
display: flex;
153+
animation: fadeIn 0.3s;
154+
}
155+
156+
.modal-content {
157+
background-color: white;
158+
padding: 30px;
159+
border-radius: 15px;
160+
text-align: center;
161+
max-width: 90%;
162+
width: 350px;
163+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
164+
transform: scale(0.8);
165+
transition: transform 0.3s ease;
166+
animation: scaleIn 0.3s forwards;
167+
}
168+
169+
.modal.show .modal-content {
170+
transform: scale(1);
171+
}
172+
173+
.modal h2 {
174+
color: #f7592b;
175+
margin-top: 0;
176+
font-size: 2rem;
177+
}
178+
179+
.modal p {
180+
font-size: 1.2rem;
181+
margin: 20px 0;
182+
}
183+
184+
#final-score {
185+
font-weight: bold;
186+
font-size: 1.5rem;
187+
color: #f7592b;
188+
}
189+
190+
#restart-button {
191+
background-color: #f7592b;
192+
color: white;
193+
border: none;
194+
padding: 12px 24px;
195+
font-size: 1.1rem;
196+
border-radius: 5px;
197+
cursor: pointer;
198+
font-weight: bold;
199+
transition: background-color 0.2s;
200+
margin-top: 10px;
201+
}
202+
203+
#restart-button:hover {
204+
background-color: #e54b1f;
205+
}
206+
207+
@keyframes fadeIn {
208+
from { opacity: 0; }
209+
to { opacity: 1; }
210+
}
211+
212+
@keyframes scaleIn {
213+
from { transform: scale(0.8); }
214+
to { transform: scale(1); }
215+
}
216+
217+
/* Media query adjustments for the modal on small screens */
218+
@media (max-width: 480px) {
219+
.modal-content {
220+
padding: 20px;
221+
width: 280px;
222+
}
223+
224+
.modal h2 {
225+
font-size: 1.6rem;
226+
}
227+
228+
.modal p {
229+
font-size: 1rem;
230+
}
231+
232+
#restart-button {
233+
padding: 10px 20px;
234+
font-size: 1rem;
235+
}
236+
}

0 commit comments

Comments
 (0)