Update index.html

index.html

@@ -10,6 +10,7 @@
     <div class="game-container">
         <div class="ball"></div>
         <div class="platform"></div>
+        <div class="score-board">Score: <span id="score">0</span></div>
     </div>
     <div class="controls">
         <button id="left-button">◀</button>
@@ -18,54 +19,91 @@
     <script>
         const platform = document.querySelector('.platform');
         const ball = document.querySelector('.ball');
-        const gameContainer = document.querySelector('.game-container');
         const leftButton = document.getElementById('left-button');
         const rightButton = document.getElementById('right-button');
+        const scoreDisplay = document.getElementById('score');
+        const gameContainer = document.querySelector('.game-container');
 
-        let platformPosition = 50; // Initial position of the platform (centered).
-        let ballPosition = { top: 0, left: Math.random() * 90 }; // Random horizontal start for the ball.
+        let platformPosition = 50; // Platform awal di tengah.
+        let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul secara acak.
+        let isCaught = false; // Apakah bola ditangkap.
+        let score = 0; // Skor awal.
 
-        // Mobile controls
-        leftButton.addEventListener('click', () => {
+        // Fungsi untuk memindahkan platform ke kiri
+        function movePlatformLeft() {
             if (platformPosition > 0) {
-                platformPosition -= 5; // Move left
+                platformPosition -= 5;
             }
             platform.style.left = platformPosition + '%';
-        });
+        }
 
-        rightButton.addEventListener('click', () => {
+        // Fungsi untuk memindahkan platform ke kanan
+        function movePlatformRight() {
             if (platformPosition < 90) {
-                platformPosition += 5; // Move right
+                platformPosition += 5;
             }
             platform.style.left = platformPosition + '%';
+        }
+
+        // Keyboard controls
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') movePlatformLeft();
+            if (e.key === 'ArrowRight') movePlatformRight();
+        });
+
+        // Button controls
+        leftButton.addEventListener('click', movePlatformLeft);
+        rightButton.addEventListener('click', movePlatformRight);
+
+        // Mouse/Touch controls
+        gameContainer.addEventListener('mousemove', (e) => {
+            const containerWidth = gameContainer.offsetWidth;
+            platformPosition = (e.clientX / containerWidth) * 100;
+            platform.style.left = platformPosition + '%';
+        });
+
+        gameContainer.addEventListener('touchmove', (e) => {
+            const touch = e.touches[0];
+            const containerWidth = gameContainer.offsetWidth;
+            platformPosition = (touch.clientX / containerWidth) * 100;
+            platform.style.left = platformPosition + '%';
         });
 
-        // Move ball
+        // Fungsi untuk menggerakkan bola
         function moveBall() {
-            ballPosition.top += 2; // Ball falls down
+            if (isCaught) return; // Jangan lanjut jika bola ditangkap.
+            ballPosition.top += 2; // Bola turun.
             ball.style.top = ballPosition.top + '%';
             ball.style.left = ballPosition.left + '%';
 
-            // Check for collision with platform
+            // Deteksi tabrakan (collision detection)
             if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
-                alert('You caught the ball!');
+                isCaught = true;
+                score++; // Tambahkan skor.
+                scoreDisplay.textContent = score; // Update skor di layar.
                 resetGame();
             }
 
-            // Check if ball missed
+            // Game over jika bola melewati platform
             if (ballPosition.top >= 100) {
-                alert('Game Over!');
+                if (!isCaught) {
+                    alert('Game Over! Final Score: ' + score);
+                    score = 0; // Reset skor.
+                    scoreDisplay.textContent = score; // Update skor.
+                }
                 resetGame();
             }
 
             requestAnimationFrame(moveBall);
         }
 
-        // Reset game
+        // Fungsi untuk mereset permainan
         function resetGame() {
-            ballPosition = { top: 0, left: Math.random() * 90 };
+            isCaught = false;
+            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
         }
 
+        // Memulai permainan
         moveBall();
     </script>
 </body>