Update index.html

index.html

@@ -11,10 +11,12 @@
         <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');
@@ -22,12 +24,53 @@
         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; // 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 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
+            }
+        });
 
         // Fungsi untuk memindahkan platform ke kiri
         function movePlatformLeft() {
@@ -45,66 +88,93 @@
             platform.style.left = platformPosition + '%';
         }
 
-        // Keyboard controls
+        // Kontrol keyboard
         window.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft') movePlatformLeft();
             if (e.key === 'ArrowRight') movePlatformRight();
         });
 
-        // Button controls
+        // Kontrol tombol
         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 (isCaught) return; // Jangan lanjut jika bola ditangkap.
-            ballPosition.top += 2; // Bola turun.
+            if (gamePaused) return; // Jangan jalankan permainan jika di-pause
+
+            ballPosition.top += ballSpeed;
             ball.style.top = ballPosition.top + '%';
             ball.style.left = ballPosition.left + '%';
 
-            // Deteksi tabrakan (collision detection)
+            // Deteksi tabrakan
             if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
                 isCaught = true;
-                score++; // Tambahkan skor.
-                scoreDisplay.textContent = score; // Update skor di layar.
-                resetGame();
+                score++;
+                scoreDisplay.textContent = score;
+                resetBall();
             }
 
-            // Game over jika bola melewati platform
+            // Game Over jika bola jatuh tanpa ditangkap
             if (ballPosition.top >= 100) {
                 if (!isCaught) {
-                    alert('Game Over! Final Score: ' + score);
-                    score = 0; // Reset skor.
-                    scoreDisplay.textContent = score; // Update skor.
+                    lives--;
+                    livesDisplay.textContent = `Lives: ${lives}`;
+                    if (lives <= 0) {
+                        alert(`Game Over! Final Score: ${score}`);
+                        resetGame();
+                    }
                 }
-                resetGame();
+                resetBall();
             }
 
+            updateLevel(); // Perbarui level setelah mencapai skor tertentu
             requestAnimationFrame(moveBall);
         }
 
-        // Fungsi untuk mereset permainan
-        function resetGame() {
+        // Fungsi untuk mereset bola
+        function resetBall() {
             isCaught = false;
-            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
+            ballPosition = { top: 0, left: Math.random() * 90 };
         }
 
-        // Memulai permainan
-        moveBall();
+        // 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
+        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();
+            }
+        }
+
+        // Update timer setiap detik
+        setInterval(countdownTimer, 1000);
+
+        moveBall(); // Memulai permainan
     </script>
 </body>
 </html>