AI game creator

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

No:50300

←

Prev Next

→

Flappy bird
Developer User21292｜Date and time 24/3/8 9:54:23
Build time 9.011 sec｜Game capacity 2.87KB｜

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;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="320"></canvas>
    
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        const bird = { x: 50, y: 150, size: 20, speed: 2 };
        const gravity = 0.1;
        
        const obstacles = [];
        const obstacleWidth = 20;
        const obstacleGap = 60;
        
        const spaceBar = 32;
        
        let gameLoop;
        
        function drawBird() {
            ctx.fillStyle = 'yellow';
            ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
        }
        
        function drawObstacles() {
            ctx.fillStyle = 'green';
            obstacles.forEach(obs => {
                ctx.fillRect(obs.x, 0, obstacleWidth, obs.top);
                ctx.fillRect(obs.x, obs.top + obstacleGap, obstacleWidth, canvas.height - obs.top - obstacleGap);
            });
        }
        
        function updateBird() {
            bird.y += bird.speed;
            bird.speed += gravity;
        }
        
        function updateObstacles() {
            obstacles.forEach(obs => {
                obs.x -= 2;
                if (obs.x < -obstacleWidth) {
                    obstacles.shift();
                }
            });
        }
        
        function checkCollisions() {
            obstacles.forEach(obs => {
                if (
                    bird.x < obs.x + obstacleWidth &&
                    bird.x + bird.size > obs.x &&
                    (bird.y < obs.top || bird.y + bird.size > obs.top + obstacleGap)
                ) {
                    clearInterval(gameLoop);
                    alert('Game Over!');
                    location.reload();
                }
            });
        }
        
        function game() {
            updateBird();
            updateObstacles();
            checkCollisions();
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBird();
            drawObstacles();
        }
        
        canvas.addEventListener('click', () => {
            bird.speed = -2;
        });
        
        function generateObstacle() {
            const obstacle = {
                x: canvas.width,
                top: Math.random() * (canvas.height - 100)
            };
            obstacles.push(obstacle);
        }
        
        gameLoop = setInterval(() => {
            game();
            
            if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - 100) {
                generateObstacle();
            }
        }, 1000 / 60);
    </script>
</body>
</html>