AI game creator

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

No:49480

104

←

Prev Next

→

Flappy bird
Developer User20860｜Date and time 24/3/5 6:44:39
Build time 10.289 sec｜Game capacity 2.429KB｜

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 Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

let bird = { x: 50, y: canvas.height / 2, velocity: 0, gravity: 0.5 };
        let pipes = [{ x: canvas.width, topHeight: Math.random() * (canvas.height - 200), bottomHeight: Math.random() * (canvas.height - 200) }];

function drawBird() {
            ctx.fillStyle = 'yellow';
            ctx.fillRect(bird.x, bird.y, 25, 25);
        }

function drawPipes() {
            ctx.fillStyle = 'green';
            pipes.forEach(pipe => {
                ctx.fillRect(pipe.x, 0, 50, pipe.topHeight);
                ctx.fillRect(pipe.x, pipe.topHeight + 200, 50, pipe.bottomHeight);
            });
        }

function moveBird() {
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;
        }

function movePipes() {
            pipes.forEach(pipe => {
                pipe.x -= 2;

if (pipe.x < -50) {
                    pipe.x = canvas.width;
                    pipe.topHeight = Math.random() * (canvas.height - 200);
                    pipe.bottomHeight = Math.random() * (canvas.height - 200);
                }
            });
        }

function checkCollision() {
            if (bird.y < 0 || bird.y > canvas.height) {
                alert('Game Over!');
                window.location.reload();
            }

pipes.forEach(pipe => {
                if (bird.x + 25 > pipe.x && bird.x < pipe.x + 50 &&
                    (bird.y < pipe.topHeight || bird.y + 25 > pipe.topHeight + 200)) {
                    alert('Game Over!');
                    window.location.reload();
                }
            });
        }

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

drawBird();
            drawPipes();

moveBird();
            movePipes();

checkCollision();

requestAnimationFrame(gameLoop);
        }

gameLoop();
        
        document.addEventListener('click', function() {
            bird.velocity = -10;
        });
    </script>
</body>
</html>