AI game creator

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

No:40183

←

Prev Next

→

Flappy bird
Developer User18010｜Date and time 24/2/1 15:29:19
Build time 13.189 sec｜Game capacity 3.337KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript. It is a single HTML file that can be played on a smartphone. I have used pictograms for the game elements.

Note: This is a basic implementation of Flappy Bird, you may enhance it further and customize it as per your requirements.

←

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;
            background-color: #4dbbff;
        }
    </style>
</head>
<body>
    <canvas id="game-canvas" width="320" height="480"></canvas>
    <script>
        // Flappy Bird Game
        
        // Get the canvas and context
        var canvas = document.getElementById("game-canvas");
        var ctx = canvas.getContext("2d");

// Load game assets
        var birdImg = new Image();
        birdImg.src = "bird.png";
        var pipeUpImg = new Image();
        pipeUpImg.src = "pipeUp.png";
        var pipeDownImg = new Image();
        pipeDownImg.src = "pipeDown.png";

// Game variables
        var birdX = 50;
        var birdY = 200;
        var gravity = 1.5;
        var score = 0;
        var pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// Game functions
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
            ctx.drawImage(birdImg, birdX, birdY, 34, 24);

// Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                var constant = pipeUpImg.height + 120;
                ctx.drawImage(pipeUpImg, pipes[i].x, pipes[i].y);
                ctx.drawImage(pipeDownImg, pipes[i].x, pipes[i].y + constant);
                
                // Move pipes
                pipes[i].x--;

// Check collision
                if (birdX + birdImg.width >= pipes[i].x && birdX <= pipes[i].x + pipeUpImg.width 
                    && (birdY <= pipes[i].y + pipeUpImg.height || birdY + birdImg.height >= pipes[i].y + constant) 
                    || birdY + birdImg.height >= canvas.height) {
                    restart();
                    return;
                }

// Increment score
                if (pipes[i].x == 5) {
                    score++;
                }

// Remove passed pipes
                if (pipes[i].x + pipeUpImg.width == 0) {
                    pipes.splice(i, 1);
                }
            }

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

// Move bird
            birdY += gravity;

// Request animation frame
            requestAnimationFrame(draw);
        }

function restart() {
            birdY = 200;
            score = 0;
            pipes = [];
            pipes[0] = {
                x: canvas.width,
                y: 0
            };
        }

function jump() {
            birdY -= 25;
        }

// Event listeners
        document.addEventListener("keydown", jump);
        canvas.addEventListener("click", jump);

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

Note: This is a basic implementation of Flappy Bird, you may enhance it further and customize it as per your requirements.