Make a game where there’s a bouncy ball and it bounces off the floor and it comes back up and it goes on like this endlessly's game

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

No:15109

131

←

Prev Next

→

Make a game where there’s a bouncy ball and it bou..ALL
Developer User6499｜Date and time 23/9/6 7:18:09
Build time 18.063 sec｜Game capacity 1.764KB｜

Script

Sure! Here's an example of a simple game where a bouncy ball moves up and down endlessly using JavaScript and HTML. Note that this code can be placed in a single HTML file and enclosed in script tags.

In this game, the ball continuously moves up and down inside the canvas element. As it reaches the floor or the ceiling, it bounces off by reversing its vertical motion direction. The `requestAnimationFrame` method is used to create a smooth animation loop. You can customize the appearance of the ball by modifying its properties like `radius` and `color` in the `ball` object.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bouncy Ball Game</title>
  <style>
    #canvas {
      background-color: #f0f0f0;
      border: 1px solid #000;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

const ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 20,
      dy: 5,
      color: "#FF0000"
    };

function drawBall() {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fillStyle = ball.color;
      ctx.fill();
      ctx.closePath();
    }

function updateBall() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();

if (ball.y + ball.radius + ball.dy > canvas.height || ball.y - ball.radius + ball.dy < 0) {
        ball.dy *= -1; // Reversing the direction when the ball hits the floor or the ceiling
      }

ball.y += ball.dy;
    }

function gameLoop() {
      updateBall();

requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>
```

You can customize the appearance of the ball by modifying its properties like `radius` and `color` in the `ball` object.