AI game creator

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

No:16317

115

←

Prev Next

→

Flappy bird
Developer User7231｜Date and time 23/9/17 7:32:30
Build time 27.719 sec｜Game capacity 4.376KB｜

Script

Sure! Here's a simple implementation of the classic game Flappy Bird using JavaScript within a single HTML file. Please note that this implementation may not be complete or optimized, but it should provide the basic functionality of the game.

Please note that to make this work as a game, you would need to provide the image file "emozi_all/game.png" and can customize the styles as you see fit.

←

Prev　Next

→ 　

Back　

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

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

```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>

// Bird class
        class Bird {
            constructor() {
                this.x = 50;
                this.y = canvas.height / 2;
                this.velocity = 0;
                this.image = new Image();
                this.image.src = "bird.png";
            }

update() {
                this.velocity += gravity;
                this.y += this.velocity;

if (this.y >= canvas.height) {
                    this.y = canvas.height;
                    gameOver = true;
                } else if (this.y <= 0) {
                    this.y = 0;
                }
            }

jump() {
                this.velocity += jumpHeight;
            }

draw() {
                ctx.drawImage(this.image, this.x, this.y, 50, 50);
            }
        }

// Pipe class
        class Pipe {
            constructor() {
                this.x = canvas.width;
                this.y = Math.random() * canvas.height;
                this.width = 50;
                this.height = Math.random() * canvas.height / 2;
                this.speed = 2;
            }

update() {
                this.x -= this.speed;

if (this.x + this.width < 0) {
                    pipes.shift();
                    score++;
                }

if (
                    bird.x < this.x + this.width &&
                    bird.x + 50 > this.x &&
                    (bird.y < this.y + this.height || bird.y + 50 > this.y + this.height + 100)
                ) {
                    gameOver = true;
                }
            }

draw() {
                ctx.fillStyle = "green";
                ctx.fillRect(this.x, this.y, this.width, this.height);
                ctx.fillRect(this.x, this.y + this.height + 100, this.width, canvas.height - this.height - 100);
            }
        }

// Game initialization
        function startGame() {
            bird = new Bird();
            pipes = [];
            score = 0;
            gameOver = false;

// Create pipes every 1.5 seconds
            setInterval(function () {
                if (!gameOver) {
                    pipes.push(new Pipe());
                }
            }, 1500);

// Update game every 20 milliseconds
            setInterval(updateGame, 20);
        }

// Update game
        function updateGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update bird
            bird.update();
            bird.draw();

// Update and draw pipes
            for (var i = 0; i < pipes.length; i++) {
                pipes[i].update();
                pipes[i].draw();
            }

// Display score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);

// Check game over
            if (gameOver) {
                ctx.fillStyle = "red";
                ctx.font = "40px Arial";
                ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
            }
        }

// Handle jump on mouse click
        document.addEventListener("click", function () {
            if (!gameOver) {
                bird.jump();
            } else {
                startGame();
            }
        });

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

Please note that to make this work as a game, you would need to provide the image file "bird.png" and can customize the styles as you see fit.