Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

a7c28a1

verified ·

1 Parent(s): 0c7940f

Update index.html

Browse files

Files changed (1) hide show

index.html +12 -24

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <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"> <!-- Link ke file CSS terpisah -->
 </head>
 <body>
     <div class="game-container">
@@ -13,10 +13,10 @@
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
         <div id="lives">
-            <span class="life" id="life1">♥️</span>
-            <span class="life" id="life2">♥️</span>
-            <span class="life" id="life3">♥️</span>
-            <span class="life" id="life4">♥️</span>
         </div>
     </div>
@@ -36,7 +36,7 @@
         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
@@ -71,14 +71,11 @@
         });
         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 = () => {
@@ -91,20 +88,17 @@
             let ballRect = ball.getBoundingClientRect();
             let platformRect = platform.getBoundingClientRect();
-            // Cek jika bola mengenai platform
             if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
                 if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
                     // Ball hits the platform
                     currentScore++;
-                    score.innerHTML = "Score: " + currentScore;
-                    // Level Up Logic
                     if (currentScore % 10 === 0) {
                         level++;
                         levelDisplay.innerHTML = "Level: " + level;
                         fallSpeed -= 0.2;
                         ballSpeed += 0.1;  // Make ball fall faster
                     }
                     resetBall();
                 }
             } else if (ballY >= window.innerHeight) {
@@ -120,12 +114,6 @@
         };
         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";
@@ -136,7 +124,7 @@
             remainingLives = 4;
             currentScore = 0;
             level = 1;
-            ballSpeed = 2;
             fallSpeed = 3;
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;

     <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="score">Score: 0</div>
         <div id="level">Level: 1</div>
         <div id="lives">
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
         </div>
     </div>
         let remainingLives = 4;
         let ballY = -30;
         let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
+        let ballSpeed = 5;  // Ball fall speed per frame
         let isTouching = false;
         // Kontrol menggunakan Mouse
         });
         let updateLives = () => {
+            let hearts = '';
+            for (let i = 0; i < remainingLives; i++) {
+                hearts += '♥️';
             }
+            livesDisplay.innerHTML = hearts;
         };
         let updateBallPosition = () => {
             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) {
         };
         let resetBall = () => {
             ballY = -30; // Reset ball to start position
             ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
             ball.style.top = ballY + "px";
             remainingLives = 4;
             currentScore = 0;
             level = 1;
+            ballSpeed = 5;
             fallSpeed = 3;
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;