Update index.html

index.html

@@ -8,23 +8,16 @@
 </head>
 <body>
     <div class="game-container">
-        <!-- 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="ball" class="ball"></div>
+        <div id="platform" class="platform"></div>
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
-
-        <!-- Platform yang dikendalikan oleh pemain -->
-        <div id="platform" class="platform"></div>
-
-        <!-- Bola yang akan jatuh -->
-        <div id="ball" class="ball"></div>
+        <div id="lives">
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
+        </div>
     </div>
 
     <script>
@@ -36,14 +29,13 @@
 
         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 = 4;
         let ballY = -30;
         let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
-        let ballSpeed = 2;  // Ball fall speed per frame
+        let ballSpeed = 3;  // Increased speed
         let isTouching = false;
 
         // Kontrol menggunakan Mouse
@@ -78,20 +70,17 @@
         });
 
         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";
-                }
+            let hearts = '';
+            for (let i = 0; i < remainingLives; i++) {
+                hearts += '♥️';
             }
+            livesDisplay.innerHTML = hearts;
         };
 
         let updateBallPosition = () => {
             ballY += ballSpeed;
 
-            // Update ball position
+            // Update ball position directly with JavaScript
             ball.style.top = ballY + "px";
             ball.style.left = ballX + "px";
 
@@ -105,31 +94,27 @@
                     if (currentScore % 10 === 0) {
                         level++;
                         levelDisplay.innerHTML = "Level: " + level;
-                        fallSpeed -= 0.2;
-                        ballSpeed += 0.1;  // Make ball fall faster
+                        ballSpeed += 0.2;  // Increase ball speed every 10 points
                     }
                     score.innerHTML = "Score: " + currentScore;
                     resetBall();
                 }
             } else if (ballY >= window.innerHeight) {
                 // Ball missed the platform
-                remainingLives--;
-                updateLives();
+                if (remainingLives > 0) {
+                    remainingLives--;
+                    updateLives();
+                    resetBall();
+                }
+
                 if (remainingLives <= 0) {
                     alert("Game Over! Your score is: " + currentScore);
                     resetGame();
                 }
-                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";
@@ -140,8 +125,7 @@
             remainingLives = 4;
             currentScore = 0;
             level = 1;
-            ballSpeed = 2;
-            fallSpeed = 3;
+            ballSpeed = 3;  // Start with a faster speed
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;
             updateLives();