AI game creator

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

No:49759

←

Prev Next

→

Flappy bird
Developer User21149｜Date and time 24/3/6 11:11:16
Build time 10.147 sec｜Game capacity 3.465KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <canvas width="400" height="600"></canvas>
    <script>
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');

let bird = { x: 50, y: 150, radius: 20, speed: 3, gravity: 0.1, jump: -4 };
        let pipes = [];
        let score = 0;
        let gameStarted = false;

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

function drawPipe(x, y, width, height) {
            ctx.fillRect(x, y, width, height);
        }

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

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

if (gameStarted) {
                bird.speed += bird.gravity;
                bird.y += bird.speed;

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

if (bird.x + bird.radius > pipe.x &&
                        bird.x - bird.radius < pipe.x + pipe.width &&
                        (bird.y - bird.radius < pipe.y || bird.y + bird.radius > pipe.y + pipe.height)) {
                        gameOver();
                    }

if (pipe.x + pipe.width < bird.x && !pipe.passed) {
                        score++;
                        pipe.passed = true;
                    }
                });

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

drawBird();
            pipes.forEach(pipe => drawPipe(pipe.x, pipe.y, pipe.width, pipe.height));
            drawScore();

requestAnimationFrame(update);
        }

function startGame() {
            gameStarted = true;
            bird.y = canvas.height / 2;
            bird.speed = 0;
            score = 0;
            pipes = [];
            generatePipes();
        }

function generatePipes() {
            const pipeGap = 200;
            const pipeWidth = 50;

const topPipeHeight = Math.floor(Math.random() * (canvas.height - pipeGap));
            const bottomPipeHeight = canvas.height - topPipeHeight - pipeGap;

pipes.push({ x: canvas.width, y: 0, width: pipeWidth, height: topPipeHeight, passed: false });
            pipes.push({ x: canvas.width, y: canvas.height - bottomPipeHeight, width: pipeWidth, height: bottomPipeHeight, passed: false });

setTimeout(generatePipes, 2000);
        }

function jump() {
            bird.speed = bird.jump;
        }

function gameOver() {
            gameStarted = false;
            alert(`Game Over! Your score: ${score}`);
            startGame();
        }

document.addEventListener('keydown', (event) => {
            if (event.key === ' ' || event.key === 'ArrowUp') {
                jump();
            }
        });

startGame();
        update();
    </script>
</body>

</html>