AI game creator

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

No:47550

100

←

Prev Next

→

Flappy bird
Developer User20520｜Date and time 24/2/28 11:44:10
Build time 9.888 sec｜Game capacity 3.196KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

var bird = { x: 50, y: canvas.height/2, size: 20, color: "yellow", gravity: 0.5, lift: -10, velocity: 0 };

var pipes = [];
            var pipeGap = 120;
            var pipeWidth = 50;
            var pipeHeight = canvas.height - pipeGap;

var gameOver = false;

canvas.addEventListener("click", function() {
                bird.velocity = bird.lift;
            });

function drawBird() {
                ctx.fillStyle = bird.color;
                ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
            }

function drawPipes() {
                pipes.forEach(function(pipe) {
                    ctx.fillStyle = "green";
                    ctx.fillRect(pipe.x, 0, pipeWidth, pipe.height);
                    ctx.fillRect(pipe.x, pipe.height + pipeGap, pipeWidth, pipeHeight - pipe.height);
                });
            }

function update() {
                if (!gameOver) {
                    bird.velocity += bird.gravity;
                    bird.y += bird.velocity;

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

pipes.forEach(function(pipe) {
                        pipe.x -= 2;
                        if (bird.x + bird.size > pipe.x && bird.x < pipe.x + pipeWidth) {
                            if (bird.y < pipe.height || bird.y + bird.size > pipe.height + pipeGap) {
                                gameOver = true;
                            }
                        }

if (pipe.x + pipeWidth < 0) {
                            pipes.shift();
                        }
                    });

if (pipes.length === 0 || pipes[pipes.length-1].x < canvas.width - 150) {
                        var pipeHeight = Math.floor(Math.random() * (canvas.height - pipeGap));
                        pipes.push({ x: canvas.width, height: pipeHeight });
                    }
                }
            }

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

drawBird();
                drawPipes();

if (gameOver) {
                    ctx.fillStyle = "red";
                    ctx.font = "30px Arial";
                    ctx.fillText("Game Over", 150, 150);
                }

requestAnimationFrame(draw);
            }

function gameLoop() {
                update();
                draw();

if (!gameOver) {
                    requestAnimationFrame(gameLoop);
                }
            }

gameLoop();
        };
    </script>
</body>
</html>