AI game creator

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

No:19952

←

Prev Next

→

Flappy bird
Developer User8883｜Date and time 23/10/7 13:42:40
Build time 22.321 sec｜Game capacity 4.048KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird</title>
<style>
    canvas {
        background-color: #4ABDAC;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <canvas id="canvas" width="480" height="640"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

// Pictogram images
        var birdImage = new Image();
        birdImage.src = "bird.png";
        var pipeTopImage = new Image();
        pipeTopImage.src = "pipe_top.png";
        var pipeBottomImage = new Image();
        pipeBottomImage.src = "pipe_bottom.png";
        var backgroundImage = new Image();
        backgroundImage.src = "background.png";

// Game variables
        var birdX = 50;
        var birdY = 300;
        var birdWidth = 34;
        var birdHeight = 24;
        var score = 0;
        var gravity = 1.5;
        var jumpPower = 20;
        var pipeGap = 150;
        var pipeWidth = 50;
        var pipeHeight = 400;
        var pipeDistance = 200;
        var pipes = [];

// Game initialization
        function init() {
            pipes = [];
            birdY = 300;
            score = 0;
            pipes.push({
                x: canvas.width,
                y: 0
            });
        }

// Game over
        function gameOver() {
            alert("Game Over! Your score is: " + score);
            init();
        }

// Event listeners
        document.addEventListener("keydown", function (event) {
            if (event.keyCode === 32) {
                birdY -= jumpPower;
            }
        });

// Game loop
        function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Move bird
            birdY += gravity;

// Draw background
            context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

// Draw bird
            context.drawImage(birdImage, birdX, birdY, birdWidth, birdHeight);

// Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                var pipeX = pipes[i].x;
                var pipeY = pipes[i].y;

// Pipe collision detection
                if (birdX + birdWidth >= pipeX &&
                    birdX <= pipeX + pipeWidth &&
                    (birdY <= pipeY + pipeHeight ||
                        birdY + birdHeight >= pipeY + pipeHeight + pipeGap)
                ) {
                    gameOver();
                }

// Increase score when passing a pipe
                if (birdX > pipeX + pipeWidth && birdX < pipeX + pipeWidth + 5) {
                    score++;
                }

// Move pipes
                pipeX -= 2;
                if (pipeX + pipeWidth < 0) {
                    pipes.splice(i, 1);
                } else {
                    pipes[i].x = pipeX;
                }

// Draw pipe top
                context.drawImage(pipeTopImage, pipeX, pipeY, pipeWidth, pipeHeight);
                // Draw pipe bottom
                context.drawImage(pipeBottomImage, pipeX, pipeY + pipeHeight + pipeGap, pipeWidth, pipeHeight);
            }

// Add new pipe
            if (pipes.length <= Math.ceil(canvas.width / pipeDistance) + 1) {
                pipes.push({
                    x: canvas.width,
                    y: Math.floor(Math.random() * (canvas.height - pipeGap))
                });
            }

// Game Over if bird touches the ground or goes above the canvas
            if (birdY + birdHeight > canvas.height || birdY < 0) {
                gameOver();
            }

// Draw score
            context.fillStyle = "#FFF";
            context.font = "24px Arial";
            context.fillText("Score: " + score, 10, 30);
            
            requestAnimationFrame(gameLoop);
        }

// Game start
        init();
        gameLoop();
    </script>
</body>
</html>