AI game creator

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

No:26519

←

Prev Next

→

Flappy bird
Developer User13163｜Date and time 23/12/1 8:18:34
Build time 100.897 sec｜Game capacity 4.472KB｜

Script

Sure, here's an example of a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

You can save the above code as a single HTML file (e.g., `flappybird.html`). When you open the file in a web browser, it will display the Flappy Bird game. To play, press the spacebar to make the bird jump and avoid colliding with the pipes. The score will be displayed at the top left corner, and the game will end if the bird hits a pipe or goes off the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure, here's an example of a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #4dbbff;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// JavaScript code can go here

// Get the canvas element
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Game variables
        var birdX = 50;
        var birdY = canvas.height / 2;
        var birdRadius = 20;
        var gravity = 1;
        var velocity = 0;
        var gap = 150;
        var pipeWidth = 80;
        var pipeHeight = 300;
        var pipeGap = 200;
        var score = 0;
        var gameover = false;

// Event listener for jumping
        document.addEventListener("keydown", jump);

// Generate random pipes
        var pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// Main game loop
        function gameLoop() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
            context.beginPath();
            context.arc(birdX, birdY, birdRadius, 0, Math.PI * 2, false);
            context.fillStyle = "#f9d423";
            context.fill();
            context.closePath();

// Move bird
            birdY += velocity;
            velocity += gravity;

// Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                context.fillStyle = "#b3ffb3";

// Top pipe
                context.fillRect(pipes[i].x, pipes[i].y, pipeWidth, pipeHeight);

// Bottom pipe
                context.fillRect(pipes[i].x, pipes[i].y + pipeHeight + pipeGap, pipeWidth, pipeHeight);

// Move pipes
                pipes[i].x--;

// Check collision with bird
                if (birdX + birdRadius >= pipes[i].x && birdX - birdRadius <= pipes[i].x + pipeWidth &&
                    (birdY - birdRadius <= pipes[i].y + pipeHeight || birdY + birdRadius >= pipes[i].y + pipeHeight + pipeGap) ||
                    birdY + birdRadius >= canvas.height) {
                    gameover = true;
                    break;
                }

// Increment score if bird passes a pipe
                if (pipes[i].x == birdX - pipeWidth) {
                    score++;
                }

// Remove pipes that are off the screen
                if (pipes[i].x + pipeWidth == 0) {
                    pipes.splice(i, 1);
                }
            }

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

// Generate new pipe
            if (pipes[pipes.length - 1].x < canvas.width - gap) {
                var newY = Math.floor(Math.random() * canvas.height - pipeHeight);
                pipes.push({
                    x: canvas.width,
                    y: newY < 0 ? newY : newY + pipeGap
                });
            }

// Game over condition
            if (gameover) {
                context.fillStyle = "#f00";
                context.font = "40px Arial";
                context.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
                return; // Stop the game loop
            }

// Call the game loop recursively
            requestAnimationFrame(gameLoop);
        }

// Jump function
        function jump(event) {
            if (event.keyCode === 32 && !gameover) {
                velocity = -12;
            }
        }

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