Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

38e2aa1

verified ·

1 Parent(s): a7ef826

Update index.html

Browse files

Files changed (1) hide show

index.html +130 -57

index.html CHANGED Viewed

@@ -3,77 +3,150 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Futuristic Ball Game</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="game-container">
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
-        <div id="lives">Lives: ❤️ ❤️ ❤️ ❤️</div>
-        <div class="platform"></div>
     </div>
     <script>
-        let score = 0;
         let level = 1;
-        let lives = 4;
-        const scoreElement = document.getElementById('score');
-        const levelElement = document.getElementById('level');
-        const livesElement = document.getElementById('lives');
-        // Function to create a new ball
-        function createBall() {
-            const ball = document.createElement('div');
-            ball.classList.add('ball');
-            // Random horizontal position for the ball
-            ball.style.left = `${Math.random() * (window.innerWidth - 30)}px`;
-            ball.style.top = '-30px'; // Start above the screen
-            document.body.appendChild(ball);
-            let ballFallInterval = setInterval(() => {
-                const ballRect = ball.getBoundingClientRect();
-                const platformRect = document.querySelector('.platform').getBoundingClientRect();
-                // Check if the ball has hit the platform
-                if (
-                    ballRect.bottom >= platformRect.top &&
-                    ballRect.left >= platformRect.left &&
-                    ballRect.right <= platformRect.right
-                ) {
-                    score += 10;
-                    scoreElement.textContent = `Score: ${score}`;
-                    ball.remove(); // Remove the ball after it has been caught
-                    clearInterval(ballFallInterval); // Stop the falling animation for this ball
-                    createBall(); // Create a new ball for the next round
-                } else if (ballRect.top > window.innerHeight) {
-                    lives -= 1;
-                    livesElement.innerHTML = `Lives: ${'❤️ '.repeat(lives)}`;
-                    ball.remove(); // Remove the ball if it falls off screen
-                    clearInterval(ballFallInterval); // Stop the ball's fall
-                    createBall(); // Create a new ball after losing a life
-                    if (lives === 0) {
-                        alert('Game Over!');
-                    }
-                }
-            }, 20); // Check every 20ms
-            return ball;
-        }
-        // Create the first ball
-        createBall();
-        // Move the platform with mouse and touch events
-        const platform = document.querySelector('.platform');
-        document.addEventListener('mousemove', (e) => {
-            platform.style.left = `${e.pageX - platform.offsetWidth / 2}px`;
         });
-        document.addEventListener('touchmove', (e) => {
-            platform.style.left = `${e.touches[0].pageX - platform.offsetWidth / 2}px`;
         });
     </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 id="ball" class="ball"></div>
+        <div id="platform" class="platform"></div>
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
+        <div id="lives">
+            <span id="life1" class="life">♥️</span>
+            <span id="life2" class="life">♥️</span>
+            <span id="life3" class="life">♥️</span>
+            <span id="life4" class="life">♥️</span>
+        </div>
     </div>
     <script>
+        let ball = document.getElementById("ball");
+        let platform = document.getElementById("platform");
+        let score = document.getElementById("score");
+        let levelDisplay = document.getElementById("level");
+        let livesDisplay = document.getElementById("lives");
+        let currentScore = 0;
         let level = 1;
+        let fallSpeed = 3;  // Initial fall speed (seconds)
+        let platformX = window.innerWidth / 2 - 50;
+        platform.style.left = platformX + "px";
+        let remainingLives = 4;
+        let ballY = -30;
+        let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
+        let ballSpeed = 2;  // Ball fall speed per frame
+        let isTouching = false;
+        // Kontrol menggunakan Mouse
+        document.addEventListener("mousemove", (e) => {
+            platformX = e.clientX - platform.offsetWidth / 2;
+            if (platformX < 0) platformX = 0;
+            if (platformX > window.innerWidth - platform.offsetWidth) {
+                platformX = window.innerWidth - platform.offsetWidth;
+            }
+            platform.style.left = platformX + "px";
+        });
+        // Kontrol menggunakan Sentuhan
+        document.addEventListener("touchmove", (e) => {
+            if (isTouching) {
+                let touchX = e.touches[0].clientX;
+                platformX = touchX - platform.offsetWidth / 2;
+                if (platformX < 0) platformX = 0;
+                if (platformX > window.innerWidth - platform.offsetWidth) {
+                    platformX = window.innerWidth - platform.offsetWidth;
+                }
+                platform.style.left = platformX + "px";
+            }
+        }, { passive: false });
+        document.addEventListener("touchstart", (e) => {
+            isTouching = true;
         });
+        document.addEventListener("touchend", (e) => {
+            isTouching = false;
         });
+        let updateLives = () => {
+            for (let i = 1; i <= 4; i++) {
+                let life = document.getElementById(`life${i}`);
+                if (i > remainingLives) {
+                    life.style.visibility = "hidden";
+                } else {
+                    life.style.visibility = "visible";
+                }
+            }
+        };
+        let updateBallPosition = () => {
+            ballY += ballSpeed;
+            // Update ball position
+            ball.style.top = ballY + "px";
+            ball.style.left = ballX + "px";
+            let ballRect = ball.getBoundingClientRect();
+            let platformRect = platform.getBoundingClientRect();
+            if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
+                if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
+                    // Ball hits the platform
+                    currentScore++;
+                    if (currentScore % 10 === 0) {
+                        level++;
+                        levelDisplay.innerHTML = "Level: " + level;
+                        fallSpeed -= 0.2;
+                        ballSpeed += 0.1;  // Make ball fall faster
+                    }
+                    score.innerHTML = "Score: " + currentScore;
+                    resetBall();
+                }
+            } else if (ballY >= window.innerHeight) {
+                // Ball missed the platform
+                remainingLives--;
+                updateLives();
+                if (remainingLives <= 0) {
+                    alert("Game Over! Your score is: " + currentScore);
+                    resetGame();
+                }
+                resetBall();
+            }
+        };
+        let resetBall = () => {
+            // Stop the animation when ball is reset
+            ball.style.animation = 'none';
+            setTimeout(() => {
+                ball.style.animation = `fall ${fallSpeed}s linear infinite`;
+            }, 50);  // Delay to restart the animation
+            ballY = -30; // Reset ball to start position
+            ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
+            ball.style.top = ballY + "px";
+            ball.style.left = ballX + "px";
+        };
+        let resetGame = () => {
+            remainingLives = 4;
+            currentScore = 0;
+            level = 1;
+            ballSpeed = 2;
+            fallSpeed = 3;
+            score.innerHTML = "Score: " + currentScore;
+            levelDisplay.innerHTML = "Level: " + level;
+            updateLives();
+            resetBall();
+        };
+        let gameLoop = () => {
+            updateBallPosition();
+            requestAnimationFrame(gameLoop);  // Loop the game
+        };
+        gameLoop(); // Start the game loop
     </script>
 </body>
 </html>