Flappy bird with small jumps's game

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

No:40481

←

Prev Next

→

Flappy bird with small jumps
Developer User18141｜Date and time 24/2/3 2:42:00
Build time 12.549 sec｜Game capacity 3.43KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

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

const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');

// Bird starting position and jump height
            let birdX = 50;
            let birdY = canvas.height / 2;
            let jumpHeight = 50;

// Pipe properties
            let pipeGap = 150;
            let pipeX = canvas.width;
            let pipeWidth = 50;
            let pipeHeight = 300;

// Score counter
            let score = 0;

// Bird jump function
            function jump() {
                birdY -= jumpHeight;
            }

// Collision detection function
            function detectCollision() {
                // Check if bird hits the pipe
                if (birdX + birdImg.width >= pipeX && birdX <= pipeX + pipeWidth &&
                    (birdY <= pipeHeight || birdY + birdImg.height >= pipeHeight + pipeGap)) {
                    return true; // Collision detected
                }
                // Check if bird hits the ground or top of the canvas
                if (birdY + birdImg.height >= canvas.height || birdY <= 0) {
                    return true; // Collision detected
                }
                return false; // No collision
            }

function draw() {
                // Clear canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
                ctx.drawImage(birdImg, birdX, birdY);

// Draw pipe
                ctx.drawImage(pipeImg, pipeX, 0, pipeWidth, pipeHeight);
                ctx.drawImage(pipeImg, pipeX, pipeHeight + pipeGap, pipeWidth, canvas.height - pipeHeight - pipeGap);

// Display score
                ctx.font = '24px Arial';
                ctx.fillStyle = 'black';
                ctx.fillText('Score: ' + score, 10, 30);

// Update pipe position
                pipeX--;

// Check if pipe is outside the canvas
                if (pipeX + pipeWidth < 0) {
                    pipeX = canvas.width; // Reset pipe position
                    score++; // Increment score
                }

// Update bird position
                birdY++;

// Check for collision
                if (detectCollision()) {
                    clearInterval(gameLoop); // Stop the game
                    alert('Game Over! Your score: ' + score);
                    location.reload(); // Restart the game
                }
            }

// Event listeners for touch and mouse input
            canvas.addEventListener('touchstart', jump);
            canvas.addEventListener('mousedown', jump);

// Game loop interval
            const gameLoop = setInterval(draw, 10);
        });
    </script>
</body>
</html>