AI game creator

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

No:11251

←

Prev Next

→

Flappy bird
Developer User3943｜Date and time 23/8/9 5:40:42
Build time 41.89 sec｜Game capacity 5.229KB｜

Script

Sure, below is an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and utilizes pictograms for the game elements. The processing starts automatically once the HTML file is executed.

Please note that in order to see the game graphics (pictograms), you will need to have the corresponding image files (`emozi_all/game.png`, `emozi_chicken.png`, and `emozi_rabbit.png`) in the same directory as the HTML file. This is a basic implementation of Flappy Bird as per your requirements. You can further enhance it by adding sounds, improving the visuals, or adding more interactive elements.

←

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;
            background-color: #87CEEB;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>

// Pictograms
        var birdImg = new Image();
        birdImg.src = "bird.png";

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

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

// Initialize game
        function initialize() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

bird = {
                x: 50,
                y: canvas.height / 2,
                width: 35,
                height: 35
            };

pipes = [];
            gravity = 1;
            score = 0;

document.addEventListener('touchstart', flap);

gameInterval = setInterval(update, 1000 / 60); // 60 FPS
        }

// Update game state
        function update() {
            clearCanvas();
            moveBird();
            movePipes();
            drawBird();
            drawPipes();
            drawScore();

if (checkCollision()) {
                gameOver();
            }
        }

// Clear canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Move bird
        function moveBird() {
            bird.y += gravity;
        }

// Flap bird
        function flap() {
            bird.y -= 20;
        }

// Move pipes
        function movePipes() {
            if (gameInterval % 120 === 0) { // Add new pipe every 2 seconds
                var pipeGap = 120;
                var pipeWidth = 70;
                var pipeHeight = Math.floor(Math.random() * 200) + 50; // Random height between 50 and 250

pipes.push({
                    x: canvas.width,
                    y: 0,
                    width: pipeWidth,
                    height: pipeHeight
                });

pipes.push({
                    x: canvas.width,
                    y: pipeHeight + pipeGap,
                    width: pipeWidth,
                    height: canvas.height - pipeHeight - pipeGap
                });
            }

for (var i = 0; i < pipes.length; i++) {
                pipes[i].x -= 2; // Move pipes towards left (higher number = faster movement)

if (pipes[i].x + pipes[i].width < 0) { // Remove pipes that move off the screen
                    pipes.splice(i, 1);
                    i--;
                    score += 0.5; // Increase score by 0.5 for each passed pipe
                }
            }
        }

// Draw bird
        function drawBird() {
            context.drawImage(birdImg, bird.x, bird.y, bird.width, bird.height);
        }

// Draw pipes
        function drawPipes() {
            for (var i = 0; i < pipes.length; i += 2) {
                context.drawImage(pipeTopImg, pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
                context.drawImage(pipeBottomImg, pipes[i + 1].x, pipes[i + 1].y, pipes[i + 1].width, pipes[i + 1].height);
            }
        }

// Draw score
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "#000";
            context.fillText("Score: " + Math.floor(score), 10, 30);
        }

// Check collision with bird and pipes
        function checkCollision() {
            for (var i = 0; i < pipes.length; i++) {
                if (bird.x + bird.width >= pipes[i].x &&
                    bird.x <= pipes[i].x + pipes[i].width &&
                    (bird.y <= pipes[i].y + pipes[i].height ||
                        bird.y + bird.height >= pipes[i].y + pipes[i].height + 80)) {
                    return true; // Collision occurred
                }
            }

return false; // No collision
        }

// Game over
        function gameOver() {
            clearInterval(gameInterval);
            document.removeEventListener('touchstart', flap);
            alert("Game over! Your score: " + Math.floor(score));
        }

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

Please note that in order to see the game graphics (pictograms), you will need to have the corresponding image files (`bird.png`, `pipe_top.png`, and `pipe_bottom.png`) in the same directory as the HTML file.

This is a basic implementation of Flappy Bird as per your requirements. You can further enhance it by adding sounds, improving the visuals, or adding more interactive elements.