AI game creator

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

No:22143

←

Prev Next

→

Flappy bird
Developer User10246｜Date and time 23/10/21 3:54:02
Build time 61.208 sec｜Game capacity 3.429KB｜

Script

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

Note that you would need to provide the actual pictogram images referenced in the code (bird.png, emozi_chicken.png, foreground.png, pipeNorth.png, pipeSouth.png) as well as the sound files (fly.mp3, score.mp3) in order to run this game successfully.

←

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 using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="288" height="512"></canvas>
    <script>
        // Flappy Bird game implementation

// Game variables
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var bird = new Image();
        var bg = new Image();
        var fg = new Image();
        var pipeNorth = new Image();
        var pipeSouth = new Image();
        var flySound = new Audio();
        var scoreSound = new Audio();

bird.src = "bird.png";
        bg.src = "background.png";
        fg.src = "foreground.png";
        pipeNorth.src = "pipeNorth.png";
        pipeSouth.src = "pipeSouth.png";
        flySound.src = "fly.mp3";
        scoreSound.src = "score.mp3";

var birdX = 10;
        var birdY = 150;
        var gravity = 1.5;
        var gap = 85;
        var constant;
        var score = 0;
        var pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// Handle user input
        document.addEventListener("keydown", moveUp);

function moveUp() {
            birdY -= 25;
            flySound.play();
        }

// Game main loop
        function draw() {
            context.drawImage(bg, 0, 0);

for (var i = 0; i < pipes.length; i++) {
                constant = pipeNorth.height + gap;
                context.drawImage(pipeNorth, pipes[i].x, pipes[i].y);
                context.drawImage(pipeSouth, pipes[i].x, pipes[i].y + constant);

pipes[i].x--;

if (pipes[i].x === 125) {
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height
                    });
                }

// Collision detection
                if (
                    birdX + bird.width >= pipes[i].x &&
                    birdX <= pipes[i].x + pipeNorth.width &&
                    (birdY <= pipes[i].y + pipeNorth.height ||
                        birdY + bird.height >= pipes[i].y + constant) ||
                    birdY + bird.height >= canvas.height - fg.height
                ) {
                    location.reload(); // Reload the page if collision occurs
                }

if (pipes[i].x === 5) {
                    score++;
                    scoreSound.play();
                }
            }

context.drawImage(fg, 0, canvas.height - fg.height);
            context.drawImage(bird, birdX, birdY);

birdY += gravity;
            context.fillStyle = "#000";
            context.font = "20px Verdana";
            context.fillText("Score: " + score, 10, canvas.height - 20);

requestAnimationFrame(draw);
        }

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

Note that you would need to provide the actual pictogram images referenced in the code (bird.png, background.png, foreground.png, pipeNorth.png, pipeSouth.png) as well as the sound files (fly.mp3, score.mp3) in order to run this game successfully.