AI game creator

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

No:39173

←

Prev Next

→

Flappy bird
Developer User17545｜Date and time 24/1/27 5:16:48
Build time 13.21 sec｜Game capacity 3.458KB｜

Script

Here's an example of a simple implementation of Flappy Bird game using JavaScript and HTML. Please note that due to the limitations of the text-based environment, the program won't actually run here, but you can copy the code into an HTML file and open it in a web browser to play the game.

To play the game, you would use the spacebar key or the up arrow key to make the bird flap. The goal is to navigate the bird through the gaps between the moving green pipes without colliding with them or hitting the ground. When the bird collides with a pipe or hits the ground, the game ends and prompts you for your score.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        #game-container {
            position: relative;
            width: 320px;
            height: 480px;
            border: 1px solid black;
        }

#bird {
            position: absolute;
            left: 50px;
            top: 200px;
            width: 40px;
            height: 30px;
            background-color: yellow;
        }

.pipe {
            position: absolute;
            width: 80px;
            height: 400px;
            background-color: green;
            animation: pipeMove 4s linear infinite;
        }

@keyframes pipeMove {
            0% {
                left: 320px;
            }
            100% {
                left: -80px;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="bird"></div>
        <div class="pipe" style="left: 200px;"></div>
        <div class="pipe" style="left: 400px;"></div>
        
    </div>

function flapBird(e) {
            if (e.key === " " || e.key === "ArrowUp") {
                const bird = document.getElementById('bird');
                bird.style.top = parseInt(bird.style.top) - 40 + 'px';
            }
        }

function gameLoop() {
            const bird = document.getElementById('bird');
            const gameContainer = document.getElementById('game-container');
            const containerRect = gameContainer.getBoundingClientRect();
            const birdRect = bird.getBoundingClientRect();

if (birdRect.bottom >= containerRect.bottom) {
                // Bird has hit the ground, game over
                endGame();
                return;
            }

const pipes = document.getElementsByClassName('pipe');
            for (let i = 0; i < pipes.length; i++) {
                const pipe = pipes[i];
                const pipeRect = pipe.getBoundingClientRect();

if (birdRect.right > pipeRect.left && birdRect.left < pipeRect.right && birdRect.bottom > pipeRect.top && birdRect.top < pipeRect.bottom) {
                    // Bird collided with a pipe, game over
                    endGame();
                    return;
                }
            }

requestAnimationFrame(gameLoop);
        }

function endGame() {
            // Prompt the user for their score and display a game over message
            const score = prompt('Game Over! Enter your score:');
            alert('Game Over! Score: ' + score);

// Optionally, you can reset the game and start again
            // resetGame();
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>
```