AI game creator

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

No:34141

←

Prev Next

→

Flappy bird
Developer User16124｜Date and time 24/1/8 16:00:53
Build time 48.928 sec｜Game capacity 4.225KB｜

Script

Sure! Here's an implementation of Flappy Bird game using JavaScript and HTML:

Please note that the above code assumes you have image files (bird.png, pipeNorth.png, pipeSouth.png, emozi_chicken.png, and ground.png) in the same directory as the HTML file. You may need to provide your own image files or adjust the image sources accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's an implementation of Flappy Bird game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            background: #70c5ce;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="flappyCanvas" width="400" height="600"></canvas>
    <script>
        // Flappy Bird game implementation

// Initialize canvas
        const canvas = document.getElementById("flappyCanvas");
        const ctx = canvas.getContext("2d");

// Pictogram images
        const birdImg = new Image();
        birdImg.src = "bird.png";
        const pipeNorthImg = new Image();
        pipeNorthImg.src = "pipeNorth.png";
        const pipeSouthImg = new Image();
        pipeSouthImg.src = "pipeSouth.png";
        const backgroundImg = new Image();
        backgroundImg.src = "background.png";
        const groundImg = new Image();
        groundImg.src = "ground.png";

// Bird position and gravity
        let birdX = 10;
        let birdY = 150;
        let gravity = 1.5;

// Pipe properties
        const pipeGap = 90;
        const pipeWidth = 50;
        const pipeHeight = 300;

let pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// Score
        let score = 0;

// Game over flag
        let gameOver = false;

// Handle user input
        document.addEventListener("keydown", moveUp);

function moveUp(event) {
            if (event.keyCode === 32 && !gameOver) {
                birdY -= 25;
            }
        }

// Main game loop
        function draw() {
            // Draw background
            ctx.drawImage(backgroundImg, 0, 0);

for (let i = 0; i < pipes.length; i++) {
                // Draw pipes
                ctx.drawImage(pipeNorthImg, pipes[i].x, pipes[i].y);
                ctx.drawImage(pipeSouthImg, pipes[i].x, pipes[i].y + pipeHeight + pipeGap);

// Move pipes to the left
                pipes[i].x--;

// Collision detection
                if (
                    (birdX + birdImg.width >= pipes[i].x && birdX <= pipes[i].x + pipeWidth
                    && (birdY <= pipes[i].y + pipeHeight || birdY + birdImg.height >= pipes[i].y + pipeHeight + pipeGap))
                    || birdY + birdImg.height >= canvas.height - groundImg.height
                ) {
                    gameOver = true;
                }

// Increase score and generate new pipes
                if (pipes[i].x === 150) {
                    score++;
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * pipeHeight) - pipeHeight
                    });
                }
            }

// Draw ground
            ctx.drawImage(groundImg, 0, canvas.height - groundImg.height);

// Draw bird
            ctx.drawImage(birdImg, birdX, birdY);

// Apply gravity
            if (!gameOver) {
                birdY += gravity;
            }

// Draw score
            ctx.fillStyle = "#000";
            ctx.font = "20px Verdana";
            ctx.fillText("Score: " + score, 10, canvas.height - 20);

// Game over message
            if (gameOver) {
                ctx.fillStyle = "#000";
                ctx.font = "40px Verdana";
                ctx.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2 - 20);
                ctx.fillText("Score: " + score, canvas.width / 2 - 70, canvas.height / 2 + 20);
            }

// Keep running the game loop
            if (!gameOver) {
                requestAnimationFrame(draw);
            }
        }

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

Please note that the above code assumes you have image files (bird.png, pipeNorth.png, pipeSouth.png, background.png, and ground.png) in the same directory as the HTML file. You may need to provide your own image files or adjust the image sources accordingly.