AI game creator

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

No:50327

←

Prev Next

→

Flappy bird
Developer User21273｜Date and time 24/3/8 12:06:11
Build time 7.269 sec｜Game capacity 1.228KB｜

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 black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="480"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

let birdX = 50;
    let birdY = 150;
    let birdWidth = 20;
    let birdHeight = 20;
    let gravity = 0.1;
    let velocity = 0;
    
    const flapSound = new Audio('flap.mp3');

const drawBird = () => {
        context.fillStyle = 'yellow';
        context.fillRect(birdX, birdY, birdWidth, birdHeight);
    };

const moveBird = () => {
        velocity += gravity;
        birdY += velocity;
    };

const clearCanvas = () => {
        context.clearRect(0, 0, canvas.width, canvas.height);
    };

const gameLoop = () => {
        clearCanvas();
        moveBird();
        drawBird();
        requestAnimationFrame(gameLoop);
    };

const flap = () => {
        velocity = -2;
        flapSound.play();
    };

document.addEventListener('click', flap);

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