diff --git a/2048 GAME/app.js b/2048 GAME/app.js
index ed1a3d7..da43de2 100644
--- a/2048 GAME/app.js
+++ b/2048 GAME/app.js
@@ -31,6 +31,8 @@ function setGame() {
setTwo();
setTwo();
+ updateProgressBar(score);
+
}
function updateTile(tile, num) {
@@ -66,6 +68,8 @@ document.addEventListener('keyup', (e) => {
setTwo();
}
document.getElementById("score").innerText = score;
+ updateProgressBar();
+
if(score>=2048){
document.getElementById("won").innerText = "🎉CONGRATULATION'S YOU WON🥳";
}
@@ -178,4 +182,22 @@ function hasEmptyTile() {
}
return false;
+}
+
+function getMaxTile() {
+ let maxTile = 0;
+ for (let r = 0; r < rows; r++) {
+ for (let c = 0; c < columns; c++) {
+ if (board[r][c] > maxTile) maxTile = board[r][c];
+ }
+ }
+ return maxTile;
+}
+
+function updateProgressBar() {
+ const goal = 2048;
+ const bar = document.getElementById("progress-bar");
+ let maxTile = getMaxTile();
+ let progress = Math.min((maxTile / goal) * 100, 100);
+ bar.style.width = progress + "%";
}
\ No newline at end of file
diff --git a/2048 GAME/index.html b/2048 GAME/index.html
index 1ace350..52c851f 100644
--- a/2048 GAME/index.html
+++ b/2048 GAME/index.html
@@ -11,9 +11,14 @@
2048
Created by Chetan Patil
+ "KEEP TRYING- GET 2048 TO WIN"
Score: 0
- "KEEP TRYING-SCORE 2048 TO WIN"
+
+
+
diff --git a/2048 GAME/style.css b/2048 GAME/style.css
index 5a97f86..cc3d058 100644
--- a/2048 GAME/style.css
+++ b/2048 GAME/style.css
@@ -14,6 +14,27 @@ hr {
p{
font-weight: bold;
}
+
+
+.progress-container {
+ height: 20px;
+ width: 80%;
+ max-width: 400px;
+ background-color: #dcdcdc;
+ border-radius: 10px;
+ margin: 20px auto;
+ overflow: hidden;
+ box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
+}
+
+#progress-bar {
+ height: 100%;
+ width: 0%;
+ background-color: #ffcc00;
+ border-radius: 10px 0 0 10px;
+ transition: width 0.4s ease;
+}
+
#board {
width: 400px;
height: 400px;