A game where a ball is falling from the sky and you must use a platform you can control to keep in up's game

Click here for free DL of the app version that can save data.

No:41241

←

Prev Next

→

A game where a ball is falling from the sky and yo..ALL
Developer User18490｜Date and time 24/2/6 15:14:57
Build time 13.104 sec｜Game capacity 3.828KB｜

Script

Here's a game that meets your requirements. Save the following code snippet as an HTML file and open it in a web browser to play the game.

In this game, you control a platform using touch gestures on a smartphone to keep a falling ball in the air. The ball falls from the sky, and your goal is to prevent it from reaching the bottom of the screen. Move the platform horizontally to bounce the ball back up. Note: The game loop continues indefinitely, so the game will keep running until you manually refresh or close the webpage. Feel free to customize the game further to add scoring, levels, or additional features as per your requirement.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

Here's a game that meets your requirements. Save the following code snippet as an HTML file and open it in a web browser to play the game.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Falling Ball Game</title>
  <style>
    #game {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: #EEE;
    }
    #platform {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 100px;
      height: 10px;
      background-color: #333;
    }
    #ball {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="platform"></div>
    <div id="ball"></div>
  </div>

// Event listeners for platform movement on touch devices
    game.addEventListener('touchstart', handleTouchStart);
    game.addEventListener('touchmove', handleTouchMove);

// Variables to track touch positions for platform movement
    var xDown = null;

// Function to handle touchstart event
    function handleTouchStart(event) {
      xDown = event.touches[0].clientX;
    }

// Function to handle touchmove event and move the platform accordingly
    function handleTouchMove(event) {
      if (!xDown) {
        return;
      }

var xUp = event.touches[0].clientX;
      var xDiff = xDown - xUp;

// Update platform position with a threshold to prevent sudden jumps
      if (Math.abs(xDiff) > 3) {
        var platformLeft = platform.offsetLeft - xDiff;

if (platformLeft >= 0 && platformLeft <= gameWidth - platformWidth) {
          platform.style.left = platformLeft + 'px';
        }
      }

xDown = xUp;
    }

// Game loop
    function gameLoop() {
      // Update ball position
      var ballTop = ball.offsetTop + ballSpeed;

// Detect collision with platform
      if (ballTop + ballRadius >= gameHeight - platform.offsetHeight && ballTop - ballRadius <= gameHeight) {
        var platformLeft = platform.offsetLeft;
        var platformRight = platform.offsetLeft + platform.offsetWidth;

if (ball.offsetLeft >= platformLeft && ball.offsetLeft <= platformRight) {
          ballSpeed = -ballSpeed; // Reflect ball upwards on collision
        }
      }

// Detect collision with game boundary
      if (ballTop + ballRadius >= gameHeight) {
        alert('Game Over');
        resetGame();
      }
      
      ball.style.top = ballTop + 'px';

requestAnimationFrame(gameLoop);
    }

// Function to reset the game state
    function resetGame() {
      ball.style.top = '0';
      ballSpeed = 2;
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

Note: The game loop continues indefinitely, so the game will keep running until you manually refresh or close the webpage. Feel free to customize the game further to add scoring, levels, or additional features as per your requirement.