Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

eb2d242

verified ·

1 Parent(s): 615c18b

Update index.html

Browse files

Files changed (1) hide show

index.html +3 -119

index.html CHANGED Viewed

@@ -3,129 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Futuristic Catch Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <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>
-        <button id="right-button">▶</button>
-    </div>
-    <!-- Game Over Overlay -->
-    <div id="game-over-overlay" class="overlay">
-        <div class="overlay-content">
-            <h2>Game Over!</h2>
-            <p>Final Score: <span id="final-score"></span></p>
-            <button id="restart-button">Restart Game</button>
-        </div>
-    </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 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 score = 0; // Skor awal.
-        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 + '%';
-            }
-        }
-        // Fungsi untuk memindahkan platform ke kanan
-        function movePlatformRight() {
-            if (platformPosition < 90) {
-                platformPosition += 5;
-                platform.style.left = platformPosition + '%';
-            }
-        }
-        // Kontrol menggunakan tombol
-        leftButton.addEventListener('click', movePlatformLeft);
-        rightButton.addEventListener('click', movePlatformRight);
-        // 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 + '%';
-        });
-        document.querySelector('.game-container').addEventListener('touchmove', (e) => {
-            const touch = e.touches[0];
-            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 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) {
-                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) {
-                showGameOver();
-            }
-            requestAnimationFrame(moveBall); // Loop pergerakan bola
-        }
-        // 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 + '%';
-            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
-        }
-        // Tombol restart untuk memulai ulang permainan
-        restartButton.addEventListener('click', () => {
-            overlay.style.display = 'none'; // Sembunyikan overlay
-            score = 0; // Reset skor
-            scoreDisplay.textContent = score;
-            resetBall(); // Reset bola
-            moveBall(); // Mulai pergerakan bola
-        });
-        // Mulai permainan
-        moveBall();
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Futuristic Falling Ball Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="game-container">
+        <div class="player"></div>
+        <div class="falling-ball"></div>
     </div>
 </body>
 </html>