AI game creator

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

No:19704

←

Prev Next

→

Flappy bird
Developer User8787｜Date and time 23/10/6 2:09:44
Build time 25.355 sec｜Game capacity 4.343KB｜

Script

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

To use this code, make sure you have pictogram images ("emozi_all/pictogram.png", "emozi_chicken.png", and "emozi_rabbit.png") in the same directory as the HTML file. You can replace those images with your own pictograms as per your preference. Note: The code provided is a basic implementation of Flappy Bird and may not have all the features and complexities of the original game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #70c5ce;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="flappyBirdCanvas" width="400" height="600"></canvas>

// Pictogram images
        const birdImg = new Image();
        birdImg.src = "bird.png";

const pipeTopImg = new Image();
        pipeTopImg.src = "pipe_top.png";

const pipeBottomImg = new Image();
        pipeBottomImg.src = "pipe_bottom.png";

// Bird object
        class Bird {
            constructor() {
                this.x = 50;
                this.y = canvas.height / 2;
                this.velocityY = 0;
                this.width = 50;
                this.height = 50;
            }

update() {
                this.velocityY += gravity;
                this.y += this.velocityY;
            }

draw() {
                ctx.drawImage(birdImg, this.x, this.y, this.width, this.height);
            }
        }

// Pipe object
        class Pipe {
            constructor(x) {
                this.x = x;
                this.yTop = Math.random() * (canvas.height / 2 - 200) + 100;
                this.yBottom = this.yTop + 200;
                this.width = 80;
                this.height = canvas.height;
                this.dx = 5;
            }

update() {
                this.x -= this.dx;
            }

draw() {
                ctx.drawImage(pipeTopImg, this.x, this.yTop - pipeTopImg.height, this.width, this.height);
                ctx.drawImage(pipeBottomImg, this.x, this.yBottom, this.width, this.height);
            }
        }

// Check collision between bird and pipes
        function checkCollision() {
            for (let i = 0; i < pipes.length; i++) {
                if (
                    bird.x < pipes[i].x + pipes[i].width &&
                    bird.x + bird.width > pipes[i].x &&
                    (bird.y < pipes[i].yTop || bird.y + bird.height > pipes[i].yBottom)
                ) {
                    gameOver = true;
                }
            }

if (bird.y + bird.height > canvas.height || bird.y < 0) {
                gameOver = true;
            }
        }

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

if (!gameOver) {
                bird.update();

pipes.forEach(pipe => {
                    pipe.update();
                    pipe.draw();
                });

bird.draw();
                checkCollision();

requestAnimationFrame(gameLoop);
            } else {
                ctx.font = "30px Arial";
                ctx.fillStyle = "#000";
                ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
            }
        }

// Event listener for key presses
        document.addEventListener("keydown", function (event) {
            if (event.code === "Space") {
                bird.velocityY = -8;
            }
        });

// Initialize game
        function startGame() {
            canvas = document.getElementById("flappyBirdCanvas");
            ctx = canvas.getContext("2d");

bird = new Bird();
            pipes = [];
            gravity = 0.2;
            gameOver = false;

for (let i = 0; i < 3; i++) {
                pipes.push(new Pipe(canvas.width + i * 300));
            }

gameLoop();
        }

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

To use this code, make sure you have pictogram images ("bird.png", "pipe_top.png", and "pipe_bottom.png") in the same directory as the HTML file. You can replace those images with your own pictograms as per your preference.

Note: The code provided is a basic implementation of Flappy Bird and may not have all the features and complexities of the original game.