Easy Flappy bird with dots's game

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

No:10807

←

Prev Next

→

Easy Flappy bird with dots
Developer User4492｜Date and time 23/8/3 6:58:58
Build time 23.914 sec｜Game capacity 3.283KB｜

Script

Sure, here's a simple implementation of a Flappy Bird game using dots as pictograms. The game will run in a single HTML file and include JavaScript enclosed in script tags:

To play the game, open the HTML file in a web browser on your smartphone. Press the spacebar or tap on the screen to make the dot bird jump. The objective is to navigate the bird through the gaps between two green bars. The score increases each time the bird passes through a gap, and the game ends if the bird hits a gap or goes out of bounds.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's a simple implementation of a Flappy Bird game using dots as pictograms. The game will run in a single HTML file and include JavaScript enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dot Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Initialize the game variables
        let canvas, ctx;
        let birdX, birdY;
        let gravity;
        let gapHeight, gapY;
        let gapWidth;
        let interval;
        let score;

// Handle key presses to make the bird jump
        function handleKeyDown(event) {
            if (event.keyCode === 32) {
                birdY -= 60;
            }
        }

// Draw the bird and the gaps
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the bird
            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.arc(birdX, birdY, 10, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();

// Draw the upper gap
            ctx.fillStyle = "green";
            ctx.fillRect(100, 0, gapWidth, gapY);

// Draw the lower gap
            ctx.fillStyle = "green";
            ctx.fillRect(100, gapY + gapHeight, gapWidth, canvas.height - gapY - gapHeight);

// Update and display the score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

// Update the game state
        function update() {
            // Apply gravity to the bird
            birdY += gravity;

// Check if the bird hits the gaps or goes out of bounds
            if (birdY < 0 || birdY > canvas.height) {
                clearInterval(interval);
                alert("Game Over! Score: " + score);
                location.reload(); // Restart the game
            }

// Increase the score if the bird passes through the gaps
            if (birdX > 100 + gapWidth) {
                score++;
            }

draw();
        }

// Start the game
        document.addEventListener("DOMContentLoaded", function () {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

birdX = canvas.width / 2;
            birdY = canvas.height / 2;
            gravity = 2;
            gapHeight = 120;
            gapY = Math.random() * (canvas.height - gapHeight * 2) + gapHeight;
            gapWidth = 80;
            score = 0;

draw();

// Add keydown event listener
            document.addEventListener("keydown", handleKeyDown);

// Start the game loop
            interval = setInterval(update, 10);
        });
    </script>
</body>
</html>
```