AI game creator

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

No:16039

←

Prev Next

→

Flappy bird
Developer User7096｜Date and time 23/9/15 16:59:24
Build time 38.878 sec｜Game capacity 4.087KB｜

Script

Sure! Here's a simple implementation of the iconic game Flappy Bird using HTML, CSS, and JavaScript. Please copy the code below and save it in a single HTML file. You can then open it in your web browser to play the game.

To play the game on a smartphone, you can open the saved HTML file on your phone's web browser. The bird will automatically jump when you tap the screen. The objective is to navigate the bird through the gaps between the pipes without colliding. Each successful gap traversed will increase your score.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="320" height="480"></canvas>
    <script>
        window.onload = function() {
            // Game variables
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var bird = new Image();
            var bg = new Image();
            var fg = new Image();
            var pipeUp = new Image();
            var pipeBottom = new Image();
            var flySound = new Audio();
            var scoreSound = new Audio();
            var score = 0;
            var gap = 85;
            var constant;

// Load game assets
            bird.src = "https://i.imgur.com/afkIP1s.png";
            bg.src = "https://i.imgur.com/vWsWUyh.png";
            fg.src = "https://i.imgur.com/8sXW9J9.png";
            pipeUp.src = "https://i.imgur.com/V3Zv7BE.png";
            pipeBottom.src = "https://i.imgur.com/0l4euTv.png";
            flySound.src = "https://www.freespecialeffects.co.uk/soundfx/animals/duck.wav";
            scoreSound.src = "https://www.freespecialeffects.co.uk/soundfx/computers/vicsfx.wav";

// Bird position and gravity
            var bX = 10;
            var bY = 150;
            var gravity = 1.5;

// User input
            document.addEventListener("keydown", moveUp);

function moveUp() {
                bY -= 25;
                flySound.play();
            }

// Pipe coordinates
            var pipe = [];
            pipe[0] = {
                x: canvas.width,
                y: 0
            };

// Draw game elements
            function draw() {
                ctx.drawImage(bg, 0, 0);

for (var i = 0; i < pipe.length; i++) {
                    constant = pipeUp.height + gap;
                    ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);
                    ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + constant);
                    pipe[i].x--;

if (pipe[i].x == 125) {
                        pipe.push({
                            x: canvas.width,
                            y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height
                        });
                    }

// Collision detection
                    if (
                        (bX + bird.width >= pipe[i].x &&
                            bX <= pipe[i].x + pipeUp.width &&
                            (bY <= pipe[i].y + pipeUp.height ||
                                bY + bird.height >= pipe[i].y + constant) ||
                            bY + bird.height >= canvas.height - fg.height)
                    ) {
                        location.reload(); // reload the page
                    }

if (pipe[i].x == 5) {
                        score++;
                        scoreSound.play();
                    }
                }

ctx.drawImage(fg, 0, canvas.height - fg.height);
                ctx.drawImage(bird, bX, bY);

bY += gravity;

ctx.fillStyle = "#000";
                ctx.font = "20px Verdana";
                ctx.fillText("Score: " + score, 10, canvas.height - 20);

requestAnimationFrame(draw);
            }

draw();
        };
    </script>
</body>
</html>
```