AI game creator

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

No:43479

←

Prev Next

→

Flappy bird
Developer User19122｜Date and time 24/2/15 15:48:16
Build time 15.391 sec｜Game capacity 5.476KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game as a single HTML file using JavaScript:

To play the game, simply save the above code as an HTML file (e.g., `flappy-bird.html`) and open it in a smartphone browser. You can control the bird by tapping the screen to make it flap and avoid the pipes. The score will be shown on the top left corner.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simple implementation of the Flappy Bird game as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            background-color: #70C5CE;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Game Variables
        var canvas, context;
        var birdX, birdY, birdGravity, birdVelocity;
        var pipes, pipeGap, pipeInterval, pipeWidth, pipeHeight, pipeColor;
        var score;

// Initialize the game
        function startGame() {
            // Initialize canvas and context
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

// Bird variables
            birdX = 50; // Initial x position of the bird
            birdY = canvas.height / 2; // Initial y position of the bird
            birdGravity = 0.5; // Gravity force on the bird
            birdVelocity = 0; // Vertical velocity of the bird

// Pipe variables
            pipes = []; // Array to hold multiple pipes
            pipeGap = 120; // Gap between pipes
            pipeInterval = 100; // Time interval between pipes
            pipeWidth = 60; // Width of each pipe
            pipeHeight = canvas.height - pipeGap; // Height of each pipe
            pipeColor = "#FF6A6A"; // Color of the pipes

// Score variable
            score = 0;

// Event listener for key presses
            document.addEventListener("keydown", flapBird);

// Start the game loop
            setInterval(updateGame, 20);
        }

// Function to update the game state
        function updateGame() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Bird logic
            birdVelocity += birdGravity;
            birdY += birdVelocity;
            drawBird();

// Pipe logic
            if (frames % pipeInterval === 0) {
                pipes.push({ x: canvas.width, y: getRandomPipeY() });
            }
            movePipes();

// Collision detection
            if (isCollision()) {
                gameOver();
                return;
            }

// Score logic
            incrementScore();
            drawScore();
        }

// Function to render the bird
        function drawBird() {
            context.fillStyle = "#FFD700"; // Bird color (gold)
            context.fillRect(birdX - 10, birdY - 10, 20, 20); // Bird shape (rectangle)
        }

// Function to handle bird flapping
        function flapBird() {
            birdVelocity = -10; // Vertical velocity change when bird flaps
        }

// Function to generate random y positions for pipes
        function getRandomPipeY() {
            var minHeight = pipeGap / 2;
            var maxHeight = canvas.height - minHeight - pipeGap;
            return Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);
        }

// Function to move pipes across the screen
        function movePipes() {
            for (var i = 0; i < pipes.length; i++) {
                pipes[i].x -= 2; // Pipe movement speed
                drawPipe(pipes[i]);
                if (pipes[i].x === birdX) { // Pipe passed the bird
                    incrementScore();
                }
            }
            if (pipes.length > 0 && pipes[0].x < -pipeWidth) { // Remove pipes that are off-screen
                pipes.shift();
            }
        }

// Function to render pipes
        function drawPipe(pipe) {
            context.fillStyle = pipeColor; // Pipe color
            context.fillRect(pipe.x, 0, pipeWidth, pipe.y); // Upper pipe
            context.fillRect(pipe.x, pipe.y + pipeGap, pipeWidth, pipeHeight); // Lower pipe
        }

// Function to check collision with bird and pipes
        function isCollision() {
            for (var i = 0; i < pipes.length; i++) {
                if (birdX + 10 >= pipes[i].x && birdX - 10 <= pipes[i].x + pipeWidth &&
                    (birdY - 10 <= pipes[i].y || birdY + 10 >= pipes[i].y + pipeGap)) {
                    return true;
                }
            }
            return birdY + 10 >= canvas.height; // Collision with ground
        }

// Function to increment score
        function incrementScore() {
            for (var i = 0; i < pipes.length; i++) {
                if (pipes[i].x + pipeWidth === birdX) {
                    score++;
                }
            }
        }

// Function to draw the score on the canvas
        function drawScore() {
            context.font = "30px Arial";
            context.fillStyle = "#FFFFFF";
            context.fillText("Score: " + score, 10, 30);
        }

// Function to end the game
        function gameOver() {
            clearInterval(updateGame);
            document.removeEventListener("keydown", flapBird);
            alert("Game Over! Final Score: " + score);
        }

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