Create a game flappy bird's game

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

No:7849

238

←

Prev Next

→

Create a game flappy bird
Developer User4085｜Date and time 23/7/10 2:00:50
Build time 12.979 sec｜Game capacity 4.338KB｜

Script

Below is a sample implementation of a Flappy Bird game in a single HTML file using JavaScript:

Please note that this is a simplified version of the Flappy Bird game and may not include all the features of the original game. It uses simple shapes and images for the bird and pipes, and provides basic collision detection and scoring functionality.

←

Prev　Next

→ 　

Back　

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

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

Below is a sample implementation of a Flappy Bird game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            background: #70c5ce;
        }
    </style>
</head>
<body>
    <canvas id="flappyBirdCanvas" width="400" height="600"></canvas>

// Gravity and speed variables
        const gravity = 0.2;
        let birdSpeed = 0;

// Pipe variables
        const pipeGap = 200;
        const pipeWidth = 70;
        const pipeHeight = 400;
        let pipeXPosition = 400;
        let pipeYPositions = [generateRandomPipeYPosition()];

// Score variable
        let score = 0;

// Creating canvas and context
        const canvas = document.getElementById("flappyBirdCanvas");
        const ctx = canvas.getContext("2d");

// Bird and pipe images
        const birdImage = new Image();
        birdImage.src = "bird.png";

const pipeImage = new Image();
        pipeImage.src = "pipe.png";

// Audio
        const flapSound = new Audio();
        flapSound.src = "flap.wav";

const gameOverSound = new Audio();
        gameOverSound.src = "game_over.wav";

// On key down event listener for bird jump
        document.addEventListener("keydown", jump);

// Bird jump function
        function jump() {
            birdSpeed = jumpHeight;
            flapSound.play();
        }

// Bird and pipe drawing function
        function draw() {
            // Clearing canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Updating pipe position
            pipeXPosition -= 2;

// Drawing pipes
            for (let i = 0; i < pipeYPositions.length; i++) {
                ctx.drawImage(pipeImage, pipeXPosition, pipeYPositions[i]);
                ctx.drawImage(
                    pipeImage,
                    pipeXPosition,
                    pipeYPositions[i] + pipeHeight + pipeGap
                );

// Collision detection
                if (
                    pipeXPosition < 100 &&
                    pipeXPosition + pipeWidth > 50 &&
                    (birdYPosition < pipeYPositions[i] + pipeHeight ||
                        birdYPosition + 34 > pipeYPositions[i] + pipeHeight + pipeGap)
                ) {
                    gameOver();
                }

// Incrementing score
                if (pipeXPosition == 50) {
                    score++;
                }

// Generating new pipe
                if (pipeXPosition < -pipeWidth) {
                    pipeYPositions.push(generateRandomPipeYPosition());
                    pipeXPosition = 400;
                }
            }

// Updating bird position
            birdYPosition += birdSpeed;
            birdSpeed += gravity;

// Drawing bird
            ctx.drawImage(birdImage, 50, birdYPosition);

// Drawing score
            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);

// Game over condition
            if (birdYPosition > canvas.height) {
                gameOver();
            } else {
                requestAnimationFrame(draw);
            }
        }

// Generate random pipe Y position
        function generateRandomPipeYPosition() {
            return Math.floor(Math.random() * -200) - 200;
        }

// Game over function
        function gameOver() {
            gameOverSound.play();
            alert("Game Over! Your score is: " + score);
            location.reload();
        }

// Starting the game
        draw();
    </script>
</body>
</html>
```