Update index.html

index.html

@@ -12,6 +12,12 @@
         <div id="platform" class="platform"></div>
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
+        <div id="lives">
+            <img class="life" src="life-icon.png" alt="Life" id="life1">
+            <img class="life" src="life-icon.png" alt="Life" id="life2">
+            <img class="life" src="life-icon.png" alt="Life" id="life3">
+            <img class="life" src="life-icon.png" alt="Life" id="life4">
+        </div>
     </div>
 
     <script>
@@ -19,6 +25,7 @@
         let platform = document.getElementById("platform");
         let score = document.getElementById("score");
         let levelDisplay = document.getElementById("level");
+        let livesDisplay = document.getElementById("lives");
 
         let currentScore = 0;
         let level = 1;
@@ -26,6 +33,7 @@
         let platformX = window.innerWidth / 2 - 50;
         platform.style.left = platformX + "px";
 
+        let remainingLives = 4;
         let isTouching = false;
 
         // Kontrol menggunakan Mouse
@@ -65,6 +73,17 @@
             ball.style.animation = `fall ${fallSpeed}s linear infinite`;
         };
 
+        let updateLives = () => {
+            for (let i = 1; i <= 4; i++) {
+                let life = document.getElementById(`life${i}`);
+                if (i > remainingLives) {
+                    life.style.visibility = "hidden";
+                } else {
+                    life.style.visibility = "visible";
+                }
+            }
+        };
+
         ball.addEventListener("animationiteration", () => {
             let ballPosition = ball.getBoundingClientRect();
             let platformPosition = platform.getBoundingClientRect();
@@ -82,11 +101,18 @@
                 score.innerHTML = "Score: " + currentScore;
                 dropBall();
             } else if (ballPosition.bottom >= window.innerHeight) {
-                currentScore = 0;
-                level = 1;
-                fallSpeed = 3;  // Reset fall speed
-                score.innerHTML = "Score: " + currentScore;
-                levelDisplay.innerHTML = "Level: " + level;
+                remainingLives--;
+                updateLives();
+                if (remainingLives <= 0) {
+                    alert("Game Over! Your score is: " + currentScore);
+                    remainingLives = 4; // Reset lives
+                    currentScore = 0; // Reset score
+                    level = 1; // Reset level
+                    fallSpeed = 3; // Reset fall speed
+                    score.innerHTML = "Score: " + currentScore;
+                    levelDisplay.innerHTML = "Level: " + level;
+                    updateLives();
+                }
                 dropBall();
             }
         });