AI game creator

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

No:23096

←

Prev Next

→

Flappy bird
Developer User10656｜Date and time 23/10/27 20:27:57
Build time 78.247 sec｜Game capacity 4KB｜

Script

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

Please note that you need to replace "emozi_all/bird.png" with the actual image file path of your choice for the bird pictogram. Also, make sure to save the image file in the same directory as the HTML file. To play the game, simply open the HTML file in your smartphone's browser. Tap the screen to make the bird flap and avoid collision with the pipes. Your score will be displayed on the screen, and if you collide with a pipe or hit the ground, the game will be over.

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        // Bird properties
        var birdImg = new Image();
        birdImg.src = "bird.png";
        var birdWidth = 50;
        var birdHeight = 40;
        var birdX = 50;
        var birdY = canvas.height / 2 - birdHeight / 2;
        var birdSpeed = 3;
        
        // Pipe properties
        var pipeWidth = 80;
        var pipeHeight = canvas.height - 100;
        var pipeGap = 150;
        var pipeX = canvas.width;
        var pipeSpeed = 2;
        var pipes = [];
        pipes[0] = {
            x: pipeX,
            y: 0
        };
        
        // Game score
        var score = 0;
        
        // Game over flag
        var gameOver = false;
        
        // Flap the bird
        function flapBird() {
            birdY -= 40;
        }
        
        // Draw objects on the canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
            ctx.drawImage(birdImg, birdX, birdY, birdWidth, birdHeight);
            
            // Draw pipes
            for (var i = 0; i < pipes.length; i++) {
                ctx.fillStyle = "#00A000";
                ctx.fillRect(pipes[i].x, pipes[i].y, pipeWidth, pipeHeight);
                
                // Check collision with bird
                if (birdX + birdWidth >= pipes[i].x && birdX <= pipes[i].x + pipeWidth 
                    && (birdY <= pipes[i].y + pipeHeight || birdY + birdHeight >= pipes[i].y + pipeHeight + pipeGap)) {
                    gameOver = true;
                }
                
                // Update score
                if (birdX === pipes[i].x + pipeWidth) {
                    score++;
                }
                
                // Move pipes
                pipes[i].x -= pipeSpeed;
                
                if (pipes[i].x === canvas.width - 300) {
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * pipeHeight) - pipeHeight
                    });
                }
            }
            
            // Draw score
            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
            
            // Update bird position
            birdY += birdSpeed;
            
            // Game over
            if (birdY + birdHeight >= canvas.height || gameOver) {
                ctx.fillStyle = "#000";
                ctx.font = "40px Arial";
                ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
                
                // Stop the game
                return;
            }
            
            // Request next frame
            requestAnimationFrame(draw);
        }
        
        // Event listener for flap on touch
        canvas.addEventListener("touchstart", flapBird);
        
        // Start the game
        draw();
    </script>
</body>
</html>
```

Please note that you need to replace "bird.png" with the actual image file path of your choice for the bird pictogram. Also, make sure to save the image file in the same directory as the HTML file.

To play the game, simply open the HTML file in your smartphone's browser. Tap the screen to make the bird flap and avoid collision with the pipes. Your score will be displayed on the screen, and if you collide with a pipe or hit the ground, the game will be over.