Update index.html

index.html

@@ -11,12 +11,10 @@
         <div class="ball"></div>
         <div class="platform"></div>
         <div class="score-board">Score: <span id="score">0</span></div>
-        <div class="lives">Lives: <span id="lives">3</span></div>
     </div>
     <div class="controls">
         <button id="left-button">◀</button>
         <button id="right-button">▶</button>
-        <button id="pause-button">Pause</button>
     </div>
     <script>
         const platform = document.querySelector('.platform');
@@ -24,53 +22,12 @@
         const leftButton = document.getElementById('left-button');
         const rightButton = document.getElementById('right-button');
         const scoreDisplay = document.getElementById('score');
-        const livesDisplay = document.getElementById('lives');
-        const pauseButton = document.getElementById('pause-button');
         const gameContainer = document.querySelector('.game-container');
 
-        let platformPosition = 50; // Posisi platform di tengah
-        let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola mulai di posisi acak
-        let score = 0; // Skor
-        let lives = 3; // Nyawa
-        let isCaught = false; // Status tangkap bola
-        let gamePaused = false; // Status pause
-        let ballSpeed = 2; // Kecepatan bola
-        let level = 1; // Level permainan
-        let timer = 30; // Timer permainan
-
-        // Display level dan timer
-        const levelDisplay = document.createElement('div');
-        levelDisplay.textContent = `Level: ${level}`;
-        levelDisplay.style.position = 'absolute';
-        levelDisplay.style.top = '10px';
-        levelDisplay.style.right = '10px';
-        levelDisplay.style.fontSize = '1.5em';
-        levelDisplay.style.color = '#ffffff';
-        levelDisplay.style.background = 'rgba(0, 0, 0, 0.5)';
-        levelDisplay.style.padding = '10px';
-        document.body.appendChild(levelDisplay);
-
-        const timerDisplay = document.createElement('div');
-        timerDisplay.textContent = `Time: ${timer}s`;
-        timerDisplay.style.position = 'absolute';
-        timerDisplay.style.top = '40px';
-        timerDisplay.style.right = '10px';
-        timerDisplay.style.fontSize = '1.5em';
-        timerDisplay.style.color = '#ffffff';
-        timerDisplay.style.background = 'rgba(0, 0, 0, 0.5)';
-        timerDisplay.style.padding = '10px';
-        document.body.appendChild(timerDisplay);
-
-        // Pause Functionality
-        pauseButton.addEventListener('click', () => {
-            gamePaused = !gamePaused;
-            if (gamePaused) {
-                pauseButton.textContent = 'Resume';
-            } else {
-                pauseButton.textContent = 'Pause';
-                moveBall(); // Continue game after pause
-            }
-        });
+        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.
 
         // Fungsi untuk memindahkan platform ke kiri
         function movePlatformLeft() {
@@ -88,93 +45,66 @@
             platform.style.left = platformPosition + '%';
         }
 
-        // Kontrol keyboard
+        // Keyboard controls
         window.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft') movePlatformLeft();
             if (e.key === 'ArrowRight') movePlatformRight();
         });
 
-        // Kontrol tombol
+        // 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 + '%';
+        });
+
         // Fungsi untuk menggerakkan bola
         function moveBall() {
-            if (gamePaused) return; // Jangan jalankan permainan jika di-pause
-
-            ballPosition.top += ballSpeed;
+            if (isCaught) return; // Jangan lanjut jika bola ditangkap.
+            ballPosition.top += 2; // Bola turun.
             ball.style.top = ballPosition.top + '%';
             ball.style.left = ballPosition.left + '%';
 
-            // Deteksi tabrakan
+            // Deteksi tabrakan (collision detection)
             if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
                 isCaught = true;
-                score++;
-                scoreDisplay.textContent = score;
-                resetBall();
+                score++; // Tambahkan skor.
+                scoreDisplay.textContent = score; // Update skor di layar.
+                resetGame();
             }
 
-            // Game Over jika bola jatuh tanpa ditangkap
+            // Game over jika bola melewati platform
             if (ballPosition.top >= 100) {
                 if (!isCaught) {
-                    lives--;
-                    livesDisplay.textContent = `Lives: ${lives}`;
-                    if (lives <= 0) {
-                        alert(`Game Over! Final Score: ${score}`);
-                        resetGame();
-                    }
+                    alert('Game Over! Final Score: ' + score);
+                    score = 0; // Reset skor.
+                    scoreDisplay.textContent = score; // Update skor.
                 }
-                resetBall();
+                resetGame();
             }
 
-            updateLevel(); // Perbarui level setelah mencapai skor tertentu
             requestAnimationFrame(moveBall);
         }
 
-        // Fungsi untuk mereset bola
-        function resetBall() {
-            isCaught = false;
-            ballPosition = { top: 0, left: Math.random() * 90 };
-        }
-
-        // Fungsi untuk memperbarui level
-        function updateLevel() {
-            if (score >= level * 10) {
-                level++;
-                levelDisplay.textContent = `Level: ${level}`;
-                ballSpeed += 0.5; // Meningkatkan kecepatan bola setiap level
-            }
-        }
-
-        // Fungsi untuk reset permainan
+        // Fungsi untuk mereset permainan
         function resetGame() {
-            score = 0;
-            lives = 3;
-            level = 1;
-            ballSpeed = 2;
-            timer = 30;
-            scoreDisplay.textContent = score;
-            livesDisplay.textContent = `Lives: ${lives}`;
-            levelDisplay.textContent = `Level: ${level}`;
-            timerDisplay.textContent = `Time: ${timer}s`;
-            resetBall();
-        }
-
-        // Fungsi untuk timer
-        function countdownTimer() {
-            if (!gamePaused && timer > 0) {
-                timer--;
-                timerDisplay.textContent = `Time: ${timer}s`;
-            } else if (timer <= 0) {
-                alert('Game Over! Time is up.');
-                resetGame();
-            }
+            isCaught = false;
+            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
         }
 
-        // Update timer setiap detik
-        setInterval(countdownTimer, 1000);
-
-        moveBall(); // Memulai permainan
+        // Memulai permainan
+        moveBall();
     </script>
 </body>
 </html>