AI game creator

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

No:19248

←

Prev Next

→

Flappy bird
Developer User8488｜Date and time 23/10/2 7:00:55
Build time 14.45 sec｜Game capacity 3.711KB｜

Script

Sure! Here's a simplified version of the Flappy Bird game implemented as a single HTML file using JavaScript. You can play the game by tapping/clicking on the screen to make the bird fly and avoid obstacles.

The game is implemented using a canvas element to draw the game graphics. The bird is represented by a red square, while the pipes are green rectangles. The player controls the bird by tapping/clicking, making it jump to avoid the pipes. The score increases as the bird passes through the pipes. The game loop continuously updates the game state and renders the graphics. If the bird collides with a pipe or goes out of the screen, the game ends. Please note that this implementation is a simplified version of the original Flappy Bird game and may not include all of its features or visual assets.

←

Prev　Next

→ 　

Back　

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

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

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

// Game variables
        let birdX = 50;
        let birdY = canvas.height / 2;
        let birdSpeedY = 0;
        const gravity = 0.5;
        const jumpStrength = 8;
        let score = 0;

// Pipe variables
        const pipeWidth = 80;
        const pipeGap = 200;
        let pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0,
        };

// Game Loop
        function gameLoop() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Bird
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(birdX, birdY, 30, 30);

// Pipes
            for (let i = 0; i < pipes.length; i++) {
                ctx.fillStyle = "#00FF00";
                ctx.fillRect(pipes[i].x, pipes[i].y, pipeWidth, canvas.height);
                ctx.fillRect(pipes[i].x, pipes[i].y + canvas.height + pipeGap, pipeWidth, canvas.height);

pipes[i].x--;
                if (pipes[i].x === canvas.width / 2) {
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * -200),
                    });
                }

// Detect collision with pipes
                if (
                    (birdX + 30 > pipes[i].x &&
                        birdX < pipes[i].x + pipeWidth &&
                        (birdY < pipes[i].y + canvas.height ||
                            birdY + 30 > pipes[i].y + canvas.height + pipeGap)) ||
                    birdY + 30 > canvas.height ||
                    birdY < 0
                ) {
                    // Game over
                    return;
                }

// Increase score when passing pipes
                if (pipes[i].x === birdX - pipeWidth) {
                    score++;
                }
            }

// Bird movement
            birdSpeedY += gravity;
            birdY += birdSpeedY;

// Display score
            ctx.fillStyle = "#000";
            ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 50);

// Repeat game loop
            requestAnimationFrame(gameLoop);
        }

// Event listeners
        document.addEventListener("click", function () {
            birdSpeedY = -jumpStrength;
        });

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

Please note that this implementation is a simplified version of the original Flappy Bird game and may not include all of its features or visual assets.