AI game creator

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

No:7464

2014

←

Prev Next

→

Bouncing ball
Developer User3477｜Date and time 23/7/7 23:01:47
Build time 13.431 sec｜Game capacity 2.248KB｜

Script

Sure! Here's a simple example of a bouncing ball game implemented as a single HTML file with JavaScript:

This game displays a bouncing ball on a canvas element. The ball moves within the canvas boundaries and bounces off the walls. The game loop keeps updating the ball's position and redrawing it on the canvas to create the illusion of motion. To play the game, you can open the HTML file on a smartphone or any browser that supports HTML5 canvas. The ball will bounce around the canvas indefinitely.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple example of a bouncing ball game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Ball Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Ball initial position and properties
        let x = canvas.width / 2;
        let y = canvas.height - 30;
        let dx = 2;
        let dy = -2;
        const ballRadius = 10;

// Draw the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

// Update the ball's position and handle collisions
        function updateBall() {
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
                dy = -dy;
            }

x += dx;
            y += dy;
        }

// Main game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the ball
            drawBall();

// Update the ball's position
            updateBall();

// Call the game loop recursively
            requestAnimationFrame(gameLoop);
        }

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

To play the game, you can open the HTML file on a smartphone or any browser that supports HTML5 canvas. The ball will bounce around the canvas indefinitely.