Make a flappy bird game's game

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

No:44428

←

Prev Next

→

Make a flappy bird game
Developer User19389｜Date and time 24/2/18 2:18:34
Build time 9.635 sec｜Game capacity 2.73KB｜

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;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

let bird = { x: 50, y: 200, size: 20, gravity: 0.5, velocity: 0 };
        let pipes = [];
        let score = 0;

function drawBird() {
            ctx.beginPath();
            ctx.arc(bird.x, bird.y, bird.size, 0, Math.PI * 2);
            ctx.fillStyle = 'yellow';
            ctx.fill();
            ctx.closePath();
        }

function drawPipes() {
            pipes.forEach(pipe => {
                ctx.fillStyle = 'green';
                ctx.fillRect(pipe.x, 0, 50, pipe.height);
                ctx.fillRect(pipe.x, pipe.height + 150, 50, canvas.height - pipe.height - 150);
                pipe.x -= 2;

if (pipe.x <= -50) {
                    pipe.x = canvas.width;
                    pipe.height = Math.floor(Math.random() * (canvas.height - 250) + 50);
                }

if (bird.x + bird.size >= pipe.x && bird.x - bird.size <= pipe.x + 50) {
                    if (bird.y - bird.size <= pipe.height || bird.y + bird.size >= pipe.height + 150) {
                        alert(`Game Over! Your score: ${score}`);
                        bird = { x: 50, y: 200, size: 20, gravity: 0.5, velocity: 0 };
                        pipes = [];
                        score = 0;
                    }
                }

if (pipe.x === bird.x) {
                    score++;
                }
            });
        }

function drawScore() {
            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

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

bird.y += bird.velocity;
            bird.velocity += bird.gravity;

if (bird.y + bird.size >= canvas.height) {
                alert(`Game Over! Your score: ${score}`);
                bird = { x: 50, y: 200, size: 20, gravity: 0.5, velocity: 0 };
                pipes = [];
                score = 0;
            }

requestAnimationFrame(draw);
        }

canvas.addEventListener('click', () => {
            bird.velocity = -10;
        });

pipes.push({ x: canvas.width, height: Math.floor(Math.random() * (canvas.height - 250) + 50) });

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