AI game creator

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

No:15873

←

Prev Next

→

Flappy bird
Developer User6962｜Date and time 23/9/13 3:05:43
Build time 22.943 sec｜Game capacity 3.2KB｜

Script

Sure, here's a sample implementation of Flappy Bird game written in a single HTML file using JavaScript:

This implementation creates a Flappy Bird game with a canvas element for rendering the game. The player can control the bird's movement by clicking the canvas or using the spacebar key. The game ends if the bird collides with the pipes. When the game ends, an alert message appears, and then the game restarts.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a sample implementation of Flappy Bird game written in 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="300" height="480"></canvas>
    <script>
        window.addEventListener('load', init, false);

var canvas, ctx;
        var bird;
        var pipes;
        var gravity;

function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            bird = { x: 50, y: canvas.height / 2, width: 25, height: 25 };
            pipes = [];
            gravity = 1;

canvas.addEventListener('click', jump, false);
            document.addEventListener('keydown', jump, false);

requestAnimationFrame(update);
        }

function jump() {
            bird.y -= 40;
        }

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

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

// Apply gravity
            bird.y += gravity;

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

pipe.x -= 3;

// Collisions
                if (bird.x + bird.width >= pipe.x && bird.x <= pipe.x + pipe.width 
                    && (bird.y <= pipe.heightTop || bird.y + bird.height >= pipe.heightBottom)) {
                    gameOver();
                }

if (pipe.x + pipe.width < 0) {
                    pipes.splice(i, 1);
                    i--;
                }
            }

// Spawn new pipes
            if (frames % 120 === 0) {
                var heightTop = Math.random() * (canvas.height / 2 - 50) + 50;
                var heightBottom = Math.random() * (canvas.height / 2 - 50) + 50;
                var pipe = { x: canvas.width, heightTop: heightTop, heightBottom: heightBottom, width: 50 };
                pipes.push(pipe);
            }

requestAnimationFrame(update);
        }

function gameOver() {
            canvas.removeEventListener('click', jump, false);
            document.removeEventListener('keydown', jump, false);
            alert("Game Over!");
            init();
        }

var frames = 0;

function updateFrames() {
            frames++;
            setTimeout(updateFrames, 10);
        }

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