Update index.html

index.html

@@ -8,14 +8,29 @@
 </head>
 <body>
     <div class="game-container">
-        <div id="ball" class="ball"></div>
-        <div id="platform" class="platform"></div>
+        <!-- Nyawa (♥️) ditempatkan di bagian atas layar -->
+        <div id="lives">
+            <span class="life">❤️</span>
+            <span class="life">❤️</span>
+            <span class="life">❤️</span>
+            <span class="life">❤️</span>
+        </div>
+
+        <!-- Skor dan Level di posisi kiri dan kanan atas -->
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
-        <div id="lives">
-            <span class="life">♥️</span>
-            <span class="life">♥️</span>
-            <span class="life">♥️</span>
+
+        <!-- Platform yang dikendalikan oleh pemain -->
+        <div id="platform" class="platform"></div>
+
+        <!-- Bola yang akan jatuh -->
+        <div id="ball" class="ball"></div>
+        
+        <!-- Game Over -->
+        <div id="game-over" class="game-over">
+            <h2>Game Over!</h2>
+            <p>Your Score: <span id="final-score">0</span></p>
+            <button id="restart-btn" onclick="restartGame()">Restart</button>
         </div>
     </div>
 
@@ -25,16 +40,19 @@
         let score = document.getElementById("score");
         let levelDisplay = document.getElementById("level");
         let livesDisplay = document.getElementById("lives");
+        let gameOverDisplay = document.getElementById("game-over");
+        let finalScoreDisplay = document.getElementById("final-score");
 
         let currentScore = 0;
         let level = 1;
+        let fallSpeed = 3;  // Initial fall speed (seconds)
         let platformX = window.innerWidth / 2 - 50;
         platform.style.left = platformX + "px";
 
-        let remainingLives = 3;
+        let remainingLives = 4;
         let ballY = -30;
         let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
-        let ballSpeed = 3;  // Increased speed
+        let ballSpeed = 2;  // Ball fall speed per frame
         let isTouching = false;
 
         // Kontrol menggunakan Mouse
@@ -69,17 +87,20 @@
         });
 
         let updateLives = () => {
-            let hearts = '';
-            for (let i = 0; i < remainingLives; i++) {
-                hearts += '♥️';
+            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";
+                }
             }
-            livesDisplay.innerHTML = hearts;
         };
 
         let updateBallPosition = () => {
             ballY += ballSpeed;
 
-            // Update ball position directly with JavaScript
+            // Update ball position
             ball.style.top = ballY + "px";
             ball.style.left = ballX + "px";
 
@@ -93,42 +114,53 @@
                     if (currentScore % 10 === 0) {
                         level++;
                         levelDisplay.innerHTML = "Level: " + level;
-                        ballSpeed += 0.2;  // Increase ball speed every 10 points
+                        fallSpeed -= 0.2;
+                        ballSpeed += 0.1;  // Make ball fall faster
                     }
                     score.innerHTML = "Score: " + currentScore;
                     resetBall();
                 }
             } else if (ballY >= window.innerHeight) {
                 // Ball missed the platform
-                if (remainingLives > 0) {
-                    remainingLives--;
-                    updateLives();
-                    resetBall();
-                }
-
+                remainingLives--;
+                updateLives();
                 if (remainingLives <= 0) {
-                    alert("Game Over! Your score is: " + currentScore);
-                    resetGame();
+                    gameOver();
                 }
+                resetBall();
             }
         };
 
         let resetBall = () => {
+            // Stop the animation when ball is reset
+            ball.style.animation = 'none';
+            setTimeout(() => {
+                ball.style.animation = `fall ${fallSpeed}s linear infinite`;
+            }, 50);  // Delay to restart the animation
+
             ballY = -30; // Reset ball to start position
             ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
             ball.style.top = ballY + "px";
             ball.style.left = ballX + "px";
         };
 
-        let resetGame = () => {
-            remainingLives = 3;
+        let gameOver = () => {
+            finalScoreDisplay.textContent = currentScore;
+            gameOverDisplay.style.display = "block";
+        };
+
+        let restartGame = () => {
+            remainingLives = 4;
             currentScore = 0;
             level = 1;
-            ballSpeed = 3;  // Start with a faster speed
+            ballSpeed = 2;
+            fallSpeed = 3;
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;
             updateLives();
+            gameOverDisplay.style.display = "none";
             resetBall();
+            gameLoop();
         };
 
         let gameLoop = () => {