AI game creator

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

No:25823

←

Prev Next

→

Flappy bird
Developer User12686｜Date and time 23/11/25 0:44:06
Build time 58.343 sec｜Game capacity 4.332KB｜

Script

Sure! Here's a basic implementation of a Flappy Bird game using JavaScript and HTML. This code can be saved as a single HTML file and played on a smartphone.

To play the game, open the HTML file in a smartphone browser. Tap the screen to make the bird jump and avoid the pipes. The score increases as you pass through each pair of pipes. If the bird collides with a pipe or hits the ground, the game is over and the score is displayed in an alert window.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a basic implementation of a Flappy Bird game using JavaScript and HTML. This code can be saved as a single HTML file and played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="flappyBirdCanvas" width="400" height="600"></canvas>

// Constants
        var birdSize = 40;
        var pipeWidth = 80;
        var pipeGap = 200;
        var gravity = 0.5;
        var jumpForce = -10;

// Initialize the game
        function init() {
            canvas = document.getElementById("flappyBirdCanvas");
            ctx = canvas.getContext("2d");

// Create the bird
            bird = {
                x: 50,
                y: canvas.height / 2,
                velocity: 0,
                width: birdSize,
                height: birdSize
            };

// Create the pipes
            pipes = [];
            pipes.push(createPipe(canvas.width + pipeWidth));

// Reset score
            score = 0;

// Start game loop
            setInterval(update, 20);

// Handle touch events
            canvas.addEventListener('touchstart', function() {
                bird.velocity = jumpForce;
            });
        }

// Create a pipe
        function createPipe(x) {
            var pipe = {
                x: x,
                y: Math.random() * (canvas.height - pipeGap),
                width: pipeWidth,
                height: canvas.height
            };
            return pipe;
        }

// Update game state
        function update() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update bird position
            bird.velocity += gravity;
            bird.y += bird.velocity;

// Draw bird
            ctx.fillStyle = "yellow";
            ctx.fillRect(bird.x, bird.y, bird.width, bird.height);

// Update pipe positions
            for (var i = 0; i < pipes.length; i++) {
                pipes[i].x--;

// Check if bird collides with pipe
                if (collides(bird, pipes[i])) {
                    return gameOver();
                }

// Check if bird passed the pipe
                if (bird.x > pipes[i].x + pipes[i].width) {
                    score++;
                    pipes.splice(i, 1);
                    i--;
                }
            }

// Draw pipes
            ctx.fillStyle = "green";
            for (var i = 0; i < pipes.length; i++) {
                ctx.fillRect(pipes[i].x, 0, pipes[i].width, pipes[i].y);
                ctx.fillRect(pipes[i].x, pipes[i].y + pipeGap, pipes[i].width, canvas.height - (pipes[i].y + pipeGap));
            }

// Draw score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 20, 40);

// Check if bird hits the ground
            if (bird.y + bird.height > canvas.height) {
                return gameOver();
            }

// Create new pipe
            if (pipes[pipes.length - 1].x < canvas.width - 300) {
                pipes.push(createPipe(canvas.width));
            }
        }

// Check for collision between two objects
        function collides(a, b) {
            return a.x < b.x + b.width &&
                a.x + a.width > b.x &&
                a.y < b.y + b.height &&
                a.y + a.height > b.y;
        }

// Game over
        function gameOver() {
            clearInterval(update);
            alert("Game Over! Your score: " + score);
            init();
        }

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