Update index.html

index.html

@@ -27,117 +27,104 @@
     </div>
 
     <script>
+        // Elemen UI
         const platform = document.querySelector('.platform');
         const ball = document.querySelector('.ball');
         const leftButton = document.getElementById('left-button');
         const rightButton = document.getElementById('right-button');
         const scoreDisplay = document.getElementById('score');
-        const gameContainer = document.querySelector('.game-container');
         const overlay = document.getElementById('game-over-overlay');
         const finalScoreDisplay = document.getElementById('final-score');
         const restartButton = document.getElementById('restart-button');
 
+        // Variabel Permainan
         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.
-        let fallSpeed = 0.5; // Kecepatan bola yang tetap
+        let fallSpeed = 0.5; // Kecepatan bola tetap.
+        let isCaught = false; // Apakah bola sudah ditangkap.
 
         // Fungsi untuk memindahkan platform ke kiri
         function movePlatformLeft() {
             if (platformPosition > 0) {
                 platformPosition -= 5;
+                platform.style.left = platformPosition + '%';
             }
-            platform.style.left = platformPosition + '%';
         }
 
         // Fungsi untuk memindahkan platform ke kanan
         function movePlatformRight() {
             if (platformPosition < 90) {
                 platformPosition += 5;
+                platform.style.left = platformPosition + '%';
             }
-            platform.style.left = platformPosition + '%';
         }
 
-        // Keyboard controls
-        window.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft') movePlatformLeft();
-            if (e.key === 'ArrowRight') movePlatformRight();
-        });
-
-        // Button controls
+        // Kontrol menggunakan tombol
         leftButton.addEventListener('click', movePlatformLeft);
         rightButton.addEventListener('click', movePlatformRight);
 
-        // Mouse/Touch controls
-        gameContainer.addEventListener('mousemove', (e) => {
-            const containerWidth = gameContainer.offsetWidth;
+        // Kontrol menggunakan mouse/touch
+        document.querySelector('.game-container').addEventListener('mousemove', (e) => {
+            const containerWidth = document.querySelector('.game-container').offsetWidth;
             platformPosition = (e.clientX / containerWidth) * 100;
             platform.style.left = platformPosition + '%';
         });
 
-        gameContainer.addEventListener('touchmove', (e) => {
+        document.querySelector('.game-container').addEventListener('touchmove', (e) => {
             const touch = e.touches[0];
-            const containerWidth = gameContainer.offsetWidth;
+            const containerWidth = document.querySelector('.game-container').offsetWidth;
             platformPosition = (touch.clientX / containerWidth) * 100;
             platform.style.left = platformPosition + '%';
         });
 
         // Fungsi untuk menggerakkan bola
         function moveBall() {
-            if (isCaught) return; // Jangan lanjut jika bola ditangkap.
-            ballPosition.top += fallSpeed; // Bola turun dengan kecepatan yang tetap
+            if (isCaught) return; // Jangan lanjut jika bola sudah ditangkap.
+
+            ballPosition.top += fallSpeed; // Bola jatuh dengan kecepatan tetap.
             ball.style.top = ballPosition.top + '%';
             ball.style.left = ballPosition.left + '%';
 
             // Deteksi tabrakan (collision detection)
             if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
-                isCaught = true;
-                score++; // Tambahkan skor.
-                scoreDisplay.textContent = score; // Update skor di layar.
-                resetGame();
+                score++; // Tambahkan skor
+                scoreDisplay.textContent = score; // Update skor di layar
+                resetBall(); // Reset bola setelah ditangkap.
             }
 
             // Game over jika bola melewati platform
             if (ballPosition.top >= 100) {
-                if (!isCaught) {
-                    showGameOver();
-                }
-                resetGame();
+                showGameOver();
             }
 
-            requestAnimationFrame(moveBall);
+            requestAnimationFrame(moveBall); // Loop pergerakan bola
         }
 
-        // Fungsi untuk mereset permainan
-        function resetGame() {
-            // Reset posisi platform dan bola
-            platformPosition = 50; // Platform kembali ke tengah
-            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang
-            ball.style.left = ballPosition.left + '%';
+        // Fungsi untuk mereset posisi bola
+        function resetBall() {
+            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang dengan posisi acak
             ball.style.top = ballPosition.top + '%';
-            platform.style.left = platformPosition + '%';
-            isCaught = false;
-            // Set kecepatan bola ke nilai default setiap kali permainan direset
-            fallSpeed = 0.5;
+            ball.style.left = ballPosition.left + '%';
+            isCaught = false; // Reset status bola yang ditangkap
         }
 
         // Fungsi untuk menampilkan overlay Game Over
         function showGameOver() {
-            finalScoreDisplay.textContent = score; // Tampilkan skor akhir.
-            overlay.style.display = 'flex'; // Tampilkan overlay.
+            finalScoreDisplay.textContent = score; // Tampilkan skor akhir
+            overlay.style.display = 'flex'; // Tampilkan overlay
         }
 
         // Tombol restart untuk memulai ulang permainan
         restartButton.addEventListener('click', () => {
-            overlay.style.display = 'none'; // Sembunyikan overlay.
-            score = 0; // Reset skor.
+            overlay.style.display = 'none'; // Sembunyikan overlay
+            score = 0; // Reset skor
             scoreDisplay.textContent = score;
-            resetGame();
-            moveBall();
+            resetBall(); // Reset bola
+            moveBall(); // Mulai pergerakan bola
         });
 
-        // Memulai permainan
+        // Mulai permainan
         moveBall();
     </script>
 </body>