Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

5f58408

verified ·

1 Parent(s): ebf6a25

Update index.html

Browse files

Files changed (1) hide show

index.html +50 -133

index.html CHANGED Viewed

@@ -3,150 +3,67 @@
 <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">
-            <img class="life" src="life-icon.png" alt="Life" id="life1">
-            <img class="life" src="life-icon.png" alt="Life" id="life2">
-            <img class="life" src="life-icon.png" alt="Life" id="life3">
-            <img class="life" src="life-icon.png" alt="Life" id="life4">
-        </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>

 <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`;
+            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 =