Make a game like flappy bird's game

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

No:40191

←

Prev Next

→

Make a game like flappy bird
Developer Flappy｜Date and time 24/2/1 16:10:15
Build time 14.137 sec｜Game capacity 3.458KB｜

Script

Sure! Here's an example of a simple HTML game similar to Flappy Bird, implemented as a single HTML file using JavaScript:

Please note that this code assumes you have `emozi_all/bird.png` and `emozi_apple.png` image files in the same directory as the HTML file. You can replace them with relevant pictogram images. You can also modify the dimensions and behavior of the game objects to fit your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's an example of a simple HTML game similar to Flappy Bird, implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Pictogram images
        var birdImage = new Image();
        birdImage.src = "bird.png";
        var obstacleImage = new Image();
        obstacleImage.src = "obstacle.png";

// Game initialization
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

bird = { x: canvas.width / 5, y: canvas.height / 2, velocity: 0 };
            obstacles = [{ x: canvas.width, y: 0 }];

gravity = 0.5;
            gameOver = false;

document.addEventListener("click", jump);

setInterval(update, 20);
        }

// Game update
        function update() {
            if (!gameOver) {
                // Clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Move bird
                bird.velocity += gravity;
                bird.y += bird.velocity;

// Draw bird
                context.drawImage(birdImage, bird.x, bird.y, 40, 40);

// Draw obstacles
                for (var i = 0; i < obstacles.length; i++) {
                    obstacles[i].x -= 5;
                    context.drawImage(obstacleImage, obstacles[i].x, obstacles[i].y, 60, 200);

// Check collision
                    if (bird.x < obstacles[i].x + 60 &&
                        bird.x + 40 > obstacles[i].x &&
                        bird.y < obstacles[i].y + 200 &&
                        bird.y + 40 > obstacles[i].y) {
                        gameOver = true;
                        document.removeEventListener("click", jump);
                        break;
                    }

// Add new obstacle
                    if (obstacles[i].x === canvas.width / 2) {
                        obstacles.push({ x: canvas.width, y: Math.random() * (canvas.height - 200) });
                    }
                }

// Game over check
                if (bird.y > canvas.height || bird.y < 0) {
                    gameOver = true;
                    document.removeEventListener("click", jump);
                }
            } else {
                // Game over message
                context.fillStyle = "#000";
                context.font = "30px Arial";
                context.fillText("Game Over", canvas.width / 2 - 70, canvas.height / 2);
            }
        }

// Jump when clicked
        function jump() {
            bird.velocity = -10;
        }

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

Please note that this code assumes you have `bird.png` and `obstacle.png` image files in the same directory as the HTML file. You can replace them with relevant pictogram images. You can also modify the dimensions and behavior of the game objects to fit your requirements.