Spaces:
Running
Running
| <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="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 class="life">♥️</span> | |
| <span class="life">♥️</span> | |
| <span 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 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 | |
| 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 = () => { | |
| 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"; | |
| 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; | |
| 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 = () => { | |
| updateBallPosition(); | |
| requestAnimationFrame(gameLoop); // Loop the game | |
| }; | |
| gameLoop(); // Start the game loop | |
| </script> | |
| </body> | |
| </html> |