Catch the falling balls from the sky and try to catch 10 balls to win and they fall at different spots everytime so you can move more to catch them's game

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

No:39240

←

Prev Next

→

Catch the falling balls from the sky and try to ca..ALL
Developer User17554｜Date and time 24/1/27 10:06:52
Build time 11.617 sec｜Game capacity 2.983KB｜

Script

Sure! Here's an example of a simple game in a single HTML file using JavaScript. The game is played on a smartphone and the objective is to catch 10 falling balls by moving the player left and right. The game ends when the player catches 10 balls.

Simply save the above code in an HTML file, open it in a web browser on your smartphone, and you should be able to play the game. The player can move left and right by dragging their finger on the screen. The balls fall randomly from the sky, and the game ends when the player catches 10 balls.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Define game variables
    var playerX = canvas.width / 2;
    var playerWidth = 50;
    var playerHeight = 50;
    var ballSize = 30;
    var ballColors = ["red", "blue", "green", "yellow", "orange"];
    var ballsCaught = 0;

// Move player based on touch input
    function handleTouchMove(e) {
      var touchX = e.touches[0].clientX;
      if (touchX < canvas.width && touchX > 0) {
        playerX = touchX - playerWidth / 2;
      }
    }

// Check if player caught the ball
    function detectCollision(ballX, ballY) {
      if (
        ballY + ballSize >= canvas.height - playerHeight &&
        ballX >= playerX &&
        ballX <= playerX + playerWidth
      ) {
        ballsCaught++;
        if (ballsCaught === 10) {
          alert("Congratulations! You caught 10 balls and won the game!");
          return;
        }
        ballX = Math.random() * (canvas.width - ballSize);
        ballY = 0;
      }
      draw(ballX, ballY);
    }

// Draw the player and falling balls
    function draw(ballX, ballY) {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
      context.fillStyle = "black";
      context.fillRect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);

// Draw the ball
      context.fillStyle = ballColors[Math.floor(Math.random() * ballColors.length)];
      context.beginPath();
      context.arc(ballX, ballY, ballSize / 2, 0, Math.PI * 2);
      context.closePath();
      context.fill();

// Move the ball
      ballY += 5;

// Check collision
      detectCollision(ballX, ballY);

// Repeat the animation
      requestAnimationFrame(function () {
        draw(ballX, ballY);
      });
    }

// Start the game
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    draw(Math.random() * (canvas.width - ballSize), 0);

// Add touch event listener to move the player
    canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
  </script>
</body>
</html>
```