Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

42f50f1

verified ·

1 Parent(s): 376801a

Update index.html

Browse files

Files changed (1) hide show

index.html +25 -57

index.html CHANGED Viewed

@@ -8,29 +8,14 @@
 </head>
 <body>
     <div class="game-container">
-        <!-- Nyawa (♥️) ditempatkan di bagian atas layar -->
-        <div id="lives">
-            <span class="life">❤️</span>
-            <span class="life">❤️</span>
-            <span class="life">❤️</span>
-            <span class="life">❤️</span>
-        </div>
-        <!-- Skor dan Level di posisi kiri dan kanan atas -->
         <div id="score">Score: 0</div>
         <div id="level">Level: 1</div>
-        <!-- Platform yang dikendalikan oleh pemain -->
-        <div id="platform" class="platform"></div>
-        <!-- Bola yang akan jatuh -->
-        <div id="ball" class="ball"></div>
-        <!-- Game Over -->
-        <div id="game-over" class="game-over" style="display: none;">
-            <h2>Game Over!</h2>
-            <p>Your Score: <span id="final-score">0</span></p>
-            <button id="restart-btn" onclick="restartGame()">Restart</button>
         </div>
     </div>
@@ -40,19 +25,16 @@
         let score = document.getElementById("score");
         let levelDisplay = document.getElementById("level");
         let livesDisplay = document.getElementById("lives");
-        let gameOverDisplay = document.getElementById("game-over");
-        let finalScoreDisplay = document.getElementById("final-score");
         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
@@ -87,20 +69,17 @@
         });
         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";
@@ -114,53 +93,42 @@
                     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) {
-                    gameOver();
                 }
-                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 gameOver = () => {
-            finalScoreDisplay.textContent = currentScore;
-            gameOverDisplay.style.display = "block";
-        };
-        let restartGame = () => {
-            remainingLives = 4;
             currentScore = 0;
             level = 1;
-            ballSpeed = 2;
-            fallSpeed = 3;
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;
             updateLives();
-            gameOverDisplay.style.display = "none";
             resetBall();
-            gameLoop();
         };
         let gameLoop = () => {

 </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 class="life">♥️</span>
+            <span class="life">♥️</span>
+            <span class="life">♥️</span>
         </div>
     </div>
         let score = document.getElementById("score");
         let levelDisplay = document.getElementById("level");
         let livesDisplay = document.getElementById("lives");
         let currentScore = 0;
         let level = 1;
         let platformX = window.innerWidth / 2 - 50;
         platform.style.left = platformX + "px";
+        let remainingLives = 3;
         let ballY = -30;
         let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
+        let ballSpeed = 3;  // Increased speed
         let isTouching = false;
         // Kontrol menggunakan Mouse
         });
         let updateLives = () => {
+            let hearts = '';
+            for (let i = 0; i < remainingLives; i++) {
+                hearts += '♥️';
             }
+            livesDisplay.innerHTML = hearts;
         };
         let updateBallPosition = () => {
             ballY += ballSpeed;
+            // Update ball position directly with JavaScript
             ball.style.top = ballY + "px";
             ball.style.left = ballX + "px";
                     if (currentScore % 10 === 0) {
                         level++;
                         levelDisplay.innerHTML = "Level: " + level;
+                        ballSpeed += 0.2;  // Increase ball speed every 10 points
                     }
                     score.innerHTML = "Score: " + currentScore;
                     resetBall();
                 }
             } else if (ballY >= window.innerHeight) {
                 // Ball missed the platform
+                if (remainingLives > 0) {
+                    remainingLives--;
+                    updateLives();
+                    resetBall();
+                }
                 if (remainingLives <= 0) {
+                    alert("Game Over! Your score is: " + currentScore);
+                    resetGame();
                 }
             }
         };
         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";
             ball.style.left = ballX + "px";
         };
+        let resetGame = () => {
+            remainingLives = 3;
             currentScore = 0;
             level = 1;
+            ballSpeed = 3;  // Start with a faster speed
             score.innerHTML = "Score: " + currentScore;
             levelDisplay.innerHTML = "Level: " + level;
             updateLives();
             resetBall();
         };
         let gameLoop = () => {