Update index.html

index.html

@@ -34,6 +34,9 @@
         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 isTouching = false;
 
         // Kontrol menggunakan Mouse
@@ -67,12 +70,6 @@
             isTouching = false;
         });
 
-        let dropBall = () => {
-            let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
-            ball.style.left = ballX + "px";
-            ball.style.animation = `fall ${fallSpeed}s linear infinite`;
-        };
-
         let updateLives = () => {
             for (let i = 1; i <= 4; i++) {
                 let life = document.getElementById(`life${i}`);
@@ -84,40 +81,66 @@
             }
         };
 
-        ball.addEventListener("animationiteration", () => {
-            let ballPosition = ball.getBoundingClientRect();
-            let platformPosition = platform.getBoundingClientRect();
-            
-            if (ballPosition.bottom >= platformPosition.top &&
-                ballPosition.left >= platformPosition.left &&
-                ballPosition.right <= platformPosition.right) {
-                currentScore++;
-                if (currentScore % 10 === 0) {
-                    level++;
-                    levelDisplay.innerHTML = "Level: " + level;
-                    fallSpeed -= 0.2;
-                    dropBall(); // Drop ball again with updated speed
+        let updateBallPosition = () => {
+            ballY += ballSpeed;
+
+            // Update ball position
+            ball.style.top = ballY + "px";
+            ball.style.left = ballX + "px";
+
+            let ballRect = ball.getBoundingClientRect();
+            let platformRect = platform.getBoundingClientRect();
+
+            if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
+                if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
+                    // Ball hits the platform
+                    currentScore++;
+                    if (currentScore % 10 === 0) {
+                        level++;
+                        levelDisplay.innerHTML = "Level: " + level;
+                        fallSpeed -= 0.2;
+                        ballSpeed += 0.1;  // Make ball fall faster
+                    }
+                    score.innerHTML = "Score: " + currentScore;
+                    resetBall();
                 }
-                score.innerHTML = "Score: " + currentScore;
-                dropBall();
-            } else if (ballPosition.bottom >= window.innerHeight) {
+            } else if (ballY >= window.innerHeight) {
+                // Ball missed the platform
                 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();
+                    resetGame();
                 }
-                dropBall();
+                resetBall();
             }
-        });
+        };
+
+        let resetBall = () => {
+            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 = 4;
+            currentScore = 0;
+            level = 1;
+            ballSpeed = 2;
+            fallSpeed = 3;
+            score.innerHTML = "Score: " + currentScore;
+            levelDisplay.innerHTML = "Level: " + level;
+            updateLives();
+            resetBall();
+        };
+
+        let gameLoop = () => {
+            updateBallPosition();
+            requestAnimationFrame(gameLoop);  // Loop the game
+        };
 
-        dropBall();
+        gameLoop(); // Start the game loop
     </script>
 </body>
 </html>