Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

07012de

verified ·

1 Parent(s): a1b39e1

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -64

index.html CHANGED Viewed

@@ -1,82 +1,110 @@
 <!DOCTYPE html>
 <html lang="en">
 <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="styles.css">
 </head>
 <body>
-  <div class="game-container">
-    <div class="falling-ball" id="ball"></div>
-    <div class="catcher" id="catcher"></div>
-    <div id="score">Score: 0</div>
-  </div>
-  <script>
-    const ball = document.getElementById("ball");
-    const catcher = document.getElementById("catcher");
-    const scoreDisplay = document.getElementById("score");
-    let score = 0;
-    let isGameOver = false;
-    // Function to move the falling ball
-    function startFalling() {
-      let ballPosition = 0;
-      const ballSpeed = 4;
-      const catcherPosition = catcher.offsetLeft;
-      function fallBall() {
-        if (isGameOver) return;
-        ballPosition += ballSpeed;
-        ball.style.top = ballPosition + "px";
-        // If the ball reaches the bottom, check if it's caught by the catcher
-        if (ballPosition >= window.innerHeight - 100) {
-          if (ballPosition >= window.innerHeight - 120 &&
-              ballPosition <= window.innerHeight - 100 &&
-              (catcherPosition <= ball.offsetLeft &&
-               catcherPosition + catcher.offsetWidth >= ball.offsetLeft + ball.offsetWidth)) {
-            score++;
-            scoreDisplay.textContent = "Score: " + score;
-          }
-          // Reset ball position after it falls
-          ballPosition = 0;
-          ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
-        }
-        // Continue falling
-        if (!isGameOver) {
-          requestAnimationFrame(fallBall);
-        }
-      }
-      fallBall();
-    }
-    // Function to move the catcher based on mouse movement
-    function moveCatcher(event) {
-      const catcherWidth = catcher.offsetWidth;
-      if (event.clientX >= 0 && event.clientX <= window.innerWidth - catcherWidth) {
-        catcher.style.left = event.clientX - catcherWidth / 2 + "px";
-      }
-    }
-    document.addEventListener("mousemove", moveCatcher);
-    // Function to start the game
-    function startGame() {
-      score = 0;
-      scoreDisplay.textContent = "Score: " + score;
-      isGameOver = false;
-      ball.style.top = "0px";
-      ball.style.left = Math.random() * (window.innerWidth - 50) + "px";
-      startFalling();
-    }
-    startGame();
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <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>
+    <script>
+        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');
+        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() {
+            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 + '%';
+        }
+        // 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 + '%';
+        });
+        // Fungsi untuk menggerakkan bola
+        function moveBall() {
+            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 (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();
+            }
+            // Game over jika bola melewati platform
+            if (ballPosition.top >= 100) {
+                if (!isCaught) {
+                    alert('Game Over! Final Score: ' + score);
+                    score = 0; // Reset skor.
+                    scoreDisplay.textContent = score; // Update skor.
+                }
+                resetGame();
+            }
+            requestAnimationFrame(moveBall);
+        }
+        // Fungsi untuk mereset permainan
+        function resetGame() {
+            isCaught = false;
+            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
+        }
+        // Memulai permainan
+        moveBall();
+    </script>
 </body>
 </html>