AI game creator

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

No:50770

132

←

Prev Next

→

Flappy Bird
Developer User21399｜Date and time 24/3/9 14:30:58
Build time 7.177 sec｜Game capacity 2.548KB｜

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>
<script>
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    document.body.appendChild(canvas);

const bird = {
        x: 100,
        y: canvas.height / 2,
        radius: 20,
        gravity: 0.6,
        velocity: 0,
        jump: -10
    };

let gameOver = false;
    let pipes = [];
    let score = 0;

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

function drawPipes() {
        for (let i = 0; i < pipes.length; i++) {
            const pipe = pipes[i];
            pipe.x -= 3;
            ctx.fillStyle = 'green';
            ctx.fillRect(pipe.x, 0, 50, pipe.top);
            ctx.fillRect(pipe.x, pipe.top + 150, 50, canvas.height - (pipe.top + 150));

if (bird.x >= pipe.x && bird.x <= pipe.x + 50) {
                if (bird.y <= pipe.top || bird.y >= pipe.top + 150) {
                    gameOver = true;
                }
            }

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

pipes = pipes.filter(pipe => pipe.x + 50 > 0);

if (pipes.length < 2) {
            let topPipe = Math.floor(Math.random() * 400 + 50); 
            pipes.push({ x: canvas.width, top: topPipe });
        }
    }

function drawScore() {
        ctx.fillStyle = 'black';
        ctx.font = '24px Arial';
        ctx.fillText('Score: ' + score, 20, 50);
    }

function drawGameOver() {
        ctx.fillStyle = 'black';
        ctx.font = '36px Arial';
        ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
    }

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

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

if (gameOver) {
            drawGameOver();
        } else {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPipes();
            drawBird();
            drawScore();
            requestAnimationFrame(updateGame);
        }
    }

document.addEventListener('click', () => {
        bird.velocity = bird.jump;
    });

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