Gravity ball, with a gravity changer, 100 to 0 gravity, drag the ball, fun's game

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

No:37578

←

Prev Next

→

Gravity ball, with a gravity changer, 100 to 0 gra..ALL
Developer User17064｜Date and time 24/1/21 6:03:05
Build time 10.003 sec｜Game capacity 3.168KB｜

Script

Sure! Here's an example of a simple Gravity Ball game implemented as a single HTML file:

To play the game, you can simply copy the above code and save it as an HTML file (e.g., "gravity_ball.html"). Open the file in a web browser (preferably on a smartphone for touch interaction). The game will start automatically, and you can drag the ball using touch or mouse input. The ball will be affected by the gravity, and you can change the gravity direction by dragging the ball up or down. Have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's an example of a simple Gravity Ball game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Gravity Ball</title>
    <style>
      /* Styling for the game canvas */
      #gameCanvas {
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        background-color: #f1f1f1;
        border: 2px solid #333;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Define the initial position and velocity of the ball
        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballRadius = 20;
        let xVelocity = 0;
        let yVelocity = 0;
        let gravity = 1;

// Function to update the game state and redraw the canvas
        function update() {
          // Apply gravity to the ball's velocity
          yVelocity += gravity;

// Update the ball's position
          ballX += xVelocity;
          ballY += yVelocity;

// Clear the canvas
          ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the ball
          ctx.beginPath();
          ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
          ctx.fillStyle = "#000";
          ctx.fill();
          ctx.closePath();

// Request the next animation frame
          requestAnimationFrame(update);
        }

// Function to handle touch/mouse events on the canvas
        function handleInput(event) {
          // Adjust the gravity value based on drag direction
          gravity = event.clientY < canvas.height / 2 ? 1 : -1;

// Adjust the ball's velocity based on drag intensity
          const dragIntensity = Math.abs(event.clientY - canvas.height / 2) / 10;
          xVelocity = (event.clientX - canvas.width / 2) / 30;
          yVelocity = gravity * dragIntensity;
        }

// Register touch/mouse event listeners
        canvas.addEventListener("mousedown", () => {
          canvas.addEventListener("mousemove", handleInput);
        });
        canvas.addEventListener("mouseup", () => {
          canvas.removeEventListener("mousemove", handleInput);
        });
        canvas.addEventListener("touchstart", () => {
          canvas.addEventListener("touchmove", handleInput);
        });
        canvas.addEventListener("touchend", () => {
          canvas.removeEventListener("touchmove", handleInput);
        });

// Start the game
        update();
      });
    </script>
  </body>
</html>
```