AI game creator

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

No:41524

←

Prev Next

→

Flappy bird
Developer User18607｜Date and time 24/2/8 3:53:28
Build time 9.124 sec｜Game capacity 2.394KB｜

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 black;
            background-color: #d3d3d3;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

let birdX = 50;
        let birdY = canvas.height / 2;
        let birdSpeedY = 0;
        let gravity = 0.5;
        let gap = 120;
        let score = 0;
        let isGameOver = false;

const pipe = {
            x: canvas.width,
            y: 0,
            width: 50,
            height: Math.random() * 200 + 50,
            speed: 2,
        };

const draw = () => {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(birdImage, birdX, birdY, 50, 50);
            context.fillStyle = "#000000";
            context.font = "24px Arial";
            context.fillText(`Score: ${score}`, 10, 30);
        };

const update = () => {
            birdSpeedY += gravity;
            birdY += birdSpeedY;

if (birdY <= 0 || birdY + 50 >= canvas.height) {
                gameOver();
            }

if (pipe.x + pipe.width < 0) {
                pipe.x = canvas.width;
                pipe.height = Math.random() * 200 + 50;
                score++;
            }

pipe.x -= pipe.speed;

if (
                birdX + 50 >= pipe.x &&
                birdX <= pipe.x + pipe.width &&
                (birdY <= pipe.y + pipe.height || birdY + 50 >= pipe.y + gap)
            ) {
                gameOver();
            }

draw();

if (!isGameOver) {
                requestAnimationFrame(update);
            }
        };

const jump = () => {
            birdSpeedY = -10;
        };

const gameOver = () => {
            isGameOver = true;
            alert(`Game Over! Your score: ${score}`);
            location.reload();
        };

canvas.addEventListener("click", jump);
        birdImage.onload = update;
    </script>
</body>
</html>