AI game creator

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

No:15895

135

←

Prev Next

→

Flappy bird
Developer User6982｜Date and time 23/9/13 10:33:07
Build time 36.049 sec｜Game capacity 4.601KB｜

Script

Sure! Here's an example of a simplified version of the popular game Flappy Bird, implemented as a single HTML file using JavaScript:

To experience this game, copy the above code into a new HTML file (e.g., "flappy-bird.html"), and open it in a web browser. Use the spacebar to make the bird jump and avoid the pipes. Press the 'R' key to restart the game if it's over. Enjoy playing Flappy Bird!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simplified version of the popular game Flappy Bird, implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas {
            background-color: #90EE90; /* Set background color */
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
        // Flappy Bird game implementation
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

var bird = { x: 50, y: canvas.height / 2, size: 20, speedY: 0, gravity: 0.2 };
        var pipes = [];
        var score = 0;
        var isGameOver = false;

function drawBird() {
            ctx.fillStyle = "#FFA500"; // Set bird color
            ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
        }

function drawPipes() {
            ctx.fillStyle = "#000"; // Set pipe color

for (var i = 0; i < pipes.length; i++) {
                ctx.fillRect(pipes[i].x, 0, pipes[i].width, pipes[i].topHeight);
                ctx.fillRect(pipes[i].x, canvas.height - pipes[i].bottomHeight, pipes[i].width, pipes[i].bottomHeight);
            }
        }

function updateBird() {
            bird.speedY += bird.gravity;
            bird.y += bird.speedY;
        }

function updatePipes() {
            for (var i = 0; i < pipes.length; i++) {
                pipes[i].x -= 2;

if (pipes[i].x + pipes[i].width <= 0) {
                    pipes.splice(i, 1);
                    score++;
                }

if (bird.x + bird.size >= pipes[i].x &&
                    bird.x <= pipes[i].x + pipes[i].width &&
                    (bird.y <= pipes[i].topHeight ||
                        bird.y + bird.size >= canvas.height - pipes[i].bottomHeight)) {
                    isGameOver = true;
                }
            }

if (pipes.length < 3) {
                generatePipe();
            }
        }

function generatePipe() {
            var minWidth = 100;
            var maxWidth = 200;
            var minGap = 100;
            var maxGap = 200;
            var width = Math.floor(Math.random() * (maxWidth - minWidth + 1) + minWidth);
            var gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap);
            var topHeight = Math.floor(Math.random() * (canvas.height - gap));
            var bottomHeight = canvas.height - gap - topHeight;

pipes.push({ x: canvas.width, width: width, topHeight: topHeight, bottomHeight: bottomHeight });
        }

function drawScore() {
            ctx.fillStyle = "#FFF";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

function gameOver() {
            ctx.fillStyle = "#000";
            ctx.font = "40px Arial";
            ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2 - 20);
            ctx.font = "20px Arial";
            ctx.fillText("Press 'R' to restart", canvas.width / 2 - 85, canvas.height / 2 + 20);
        }

function restartGame() {
            isGameOver = false;
            bird.y = canvas.height / 2;
            bird.speedY = 0;
            score = 0;
            pipes = [];
        }

function keyDownHandler(event) {
            if (event.keyCode === 32 && !isGameOver) { // Space key
                bird.speedY = -5; // Set bird jump height
            }

if (event.keyCode === 82 && isGameOver) { // R key
                restartGame();
            }
        }

document.addEventListener("keydown", keyDownHandler);

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!isGameOver) {
                updateBird();
                updatePipes();
            }

drawBird();
            drawPipes();
            drawScore();

if (isGameOver) {
                gameOver();
            }

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>
```