Flappy bird with dots's game

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

No:10806

←

Prev Next

→

Flappy bird with dots
Developer User4492｜Date and time 23/8/3 6:57:02
Build time 33.549 sec｜Game capacity 5.003KB｜

Script

Sure! Here's a simple implementation of Flappy Bird using dots as pictograms within a single HTML file:

To play the game, open the HTML file on a smartphone, and tap on the screen to make the dot (representing the bird) jump and avoid the obstacles (represented by dots as well). The goal is to pass through the gaps between the obstacles and achieve the highest score possible. Please note that this is a basic implementation of Flappy Bird using simple dots for pictograms. You can modify and enhance the game as per your requirements and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Sure! Here's a simple implementation of Flappy Bird using dots as pictograms within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Game variables
        let canvas, context;
        let birdX, birdY;
        let gravity, velocity;
        let gap, gapPosition;
        let score;
        let gameOver;
        let obstacleSpeed;
        let obstacles;

// Initialize game
        function Initialize() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            birdX = 50;
            birdY = canvas.height / 2;
            gravity = 0.1;
            velocity = 0;
            gap = 150;
            gapPosition = canvas.width;
            score = 0;
            gameOver = false;
            obstacleSpeed = 2;
            obstacles = [];
            obstacles.push({ x: canvas.width, height: GenerateRandomHeight() });

// Bind touch event
            canvas.addEventListener('touchstart', function () {
                if (!gameOver) {
                    velocity -= 10;
                } else {
                    ResetGame();
                }
            });

// Start game loop
            setInterval(GameLoop, 10);
        }

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

// Move obstacles
                for (let i = obstacles.length - 1; i >= 0; i--) {
                    obstacles[i].x -= obstacleSpeed;

// Check collision with bird
                    if (birdX + 20 >= obstacles[i].x && birdX <= obstacles[i].x + 50 &&
                        (birdY <= obstacles[i].height || birdY + 20 >= obstacles[i].height + gap)) {
                        gameOver = true;
                    }

// Remove off-screen obstacles
                    if (obstacles[i].x + 50 <= 0) {
                        obstacles.splice(i, 1);
                    }

// Add new obstacle
                    if (obstacles[obstacles.length - 1].x < canvas.width - 200) {
                        obstacles.push({ x: canvas.width, height: GenerateRandomHeight() });
                    }

// Increase score
                    if (obstacles[i].x + 50 <= birdX && !obstacles[i].scored) {
                        score++;
                        obstacles[i].scored = true;
                    }
                }

// Bird physics
                velocity += gravity;
                birdY += velocity;

// Draw bird
                context.fillStyle = "#000";
                context.fillRect(birdX, birdY, 20, 20);

// Draw obstacles
                for (let i = 0; i < obstacles.length; i++) {
                    context.fillStyle = "#000";
                    context.fillRect(obstacles[i].x, 0, 50, obstacles[i].height);
                    context.fillRect(obstacles[i].x, obstacles[i].height + gap, 50, canvas.height - obstacles[i].height - gap);
                }

// Draw score
                context.font = "30px Arial";
                context.fillText("Score: " + score, 10, 40);
            } else {
                // Draw game over message
                context.font = "50px Arial";
                context.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2);
                context.fillText("Tap to restart", canvas.width / 2 - 170, canvas.height / 2 + 50);
            }
        }

// Reset game
        function ResetGame() {
            gameOver = false;
            birdY = canvas.height / 2;
            velocity = 0;
            score = 0;
            obstacles = [];
            obstacles.push({ x: canvas.width, height: GenerateRandomHeight() });
        }

// Generate random obstacle height
        function GenerateRandomHeight() {
            return Math.floor(Math.random() * (canvas.height - gap));
        }

// Start game on page load
        window.onload = Initialize;
    </script>
</body>
</html>
```

Please note that this is a basic implementation of Flappy Bird using simple dots for pictograms. You can modify and enhance the game as per your requirements and preferences.