AI game creator

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

No:17590

←

Prev Next

→

Flappy bird
Developer User7738｜Date and time 23/9/24 2:14:36
Build time 32.235 sec｜Game capacity 4.229KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented in a single HTML file using JavaScript:

To play the game, you can open the HTML file on a web browser (preferably on a smartphone for a better experience). The player can tap on the screen to make the bird flap and try to navigate it through the pipes without colliding. The score increases each time the bird successfully passes a pipe. If the bird collides with a pipe, a game over alert is displayed, and the game restarts automatically.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Flappy Bird game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game variables
        var canvas;
        var context;
        var bird;
        var pipes;
        var score;

// Bird object
        function Bird() {
            this.x = 50;
            this.y = canvas.height / 2;
            this.velocityY = 0;
            
            this.flap = function() {
                this.velocityY -= 5;
            };
            
            this.update = function() {
                this.velocityY += 0.2;
                this.y += this.velocityY;
            };
            
            this.draw = function() {
                context.fillStyle = "red";
                context.fillRect(this.x, this.y, 20, 20);
            };
        }

// Pipe object
        function Pipe() {
            this.x = canvas.width;
            this.y = Math.floor(Math.random() * canvas.height) + 100;
            this.width = 40;
            this.height = canvas.height - this.y;
            this.speed = 2;
            
            this.update = function() {
                this.x -= this.speed;
                
                // Check collision with bird
                if (bird.x + bird.width > this.x && bird.x < this.x + this.width &&
                    (bird.y < this.y || bird.y + bird.height > this.y + this.height)) {
                    gameOver();
                }
                
                // Check if pipe has passed bird
                if (bird.x > this.x + this.width) {
                    score++;
                }
            };
            
            this.draw = function() {
                context.fillStyle = "green";
                context.fillRect(this.x, 0, this.width, this.y);
                context.fillRect(this.x, this.y + this.height, this.width, canvas.height - (this.y + this.height));
            };
        }

function update() {
            bird.update();
            pipes.forEach(function(pipe) {
                pipe.update();
            });
        }

function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            bird.draw();
            pipes.forEach(function(pipe) {
                pipe.draw();
            });
            
            // Draw score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);
        }

function gameOver() {
            alert("Game Over! Your score: " + score);
            startGame();
        }

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