AI game creator

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

No:40200

115

←

Prev Next

→

Flappy bird
Developer Flappy｜Date and time 24/2/1 16:31:59
Build time 13.867 sec｜Game capacity 3.342KB｜

Script

Sure, here's a simple implementation of the Flappy Bird game as a single HTML file using JavaScript:

Please note that this is a simplified version of the Flappy Bird game and uses pictograms instead of actual images. You can replace the `birdImage` and `pipeImage` variables with appropriate image URLs to use images instead.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure, here's a simple implementation of the Flappy Bird game as a single HTML file using JavaScript:

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

// Pictograms (replace with actual images if desired)
        var birdImage = "🐦";
        var pipeImage = "➘";

// Bird properties
        var bird = {
            x: 50,
            y: canvas.height / 2,
            velocityY: 0,
            gravity: 0.5,
            jumpHeight: 10
        };

// Pipe properties
        var pipeGap = 100;
        var pipes = [];
        pipes.push({
            x: canvas.width,
            y: 0,
            height: Math.floor(Math.random() * (canvas.height - pipeGap))
        });

// Game control
        var gameOver = false;
        var score = 0;

// Event listener for the bird to jump
        document.addEventListener("click", function() {
            if (!gameOver) {
                bird.velocityY = -bird.jumpHeight;
            }
        });

function drawPictograms() {
            ctx.font = "48px Arial";
            ctx.fillText(birdImage, bird.x, bird.y);

pipes.forEach(function(pipe) {
                ctx.fillText(pipeImage, pipe.x, pipe.y);
                ctx.fillText(pipeImage, pipe.x, pipe.y + pipe.height + pipeGap);
            });
        }

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

if (!gameOver) {
                bird.velocityY += bird.gravity;
                bird.y += bird.velocityY;

if (bird.y < 0 || bird.y + 48 > canvas.height) {
                    gameOver = true;
                }

pipes.forEach(function(pipe) {
                    pipe.x--;

if (pipe.x === 0) {
                        pipes.push({
                            x: canvas.width,
                            y: 0,
                            height: Math.floor(Math.random() * (canvas.height - pipeGap))
                        });
                    }

if (pipe.x === bird.x) {
                        score++;
                    }

// Check collision
                    if (
                        bird.x + 48 > pipe.x && bird.x < pipe.x + 48 &&
                        (bird.y < pipe.height || bird.y + 48 > pipe.height + pipeGap)
                    ) {
                        gameOver = true;
                    }
                });

if (pipes.length > 5) {
                    pipes.shift();
                }

drawPictograms();
                requestAnimationFrame(update);
            } else {
                ctx.fillText("Game Over! Score: " + score, 100, canvas.height / 2);
            }
        }

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