Fily bird

[prajapatimittal1112-cpu]

<style> body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #333; overflow: hidden; } canvas { background: #70c5ce; border: 4px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5); } </style> <script> const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d');

// Game Variables
let birdY, birdX, velocity, gravity, jump, score, pipes, isGameOver;

function resetGame() {
    birdY = 200; birdX = 50; velocity = 0; gravity = 0.25; jump = -4.5; score = 0;
    pipes = [{x: 320, top: 100}];
    isGameOver = false;
}

resetGame();

function draw() {
    // Clear screen
    ctx.fillStyle = '#70c5ce';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if (isGameOver) {
        ctx.fillStyle = 'black';
        ctx.font = '30px Arial';
        ctx.fillText("Game Over!", 80, 200);
        ctx.font = '20px Arial';
        ctx.fillText("Score: " + score, 115, 240);
        ctx.fillText("Click to Restart", 85, 280);
        return; // Stop drawing the game loop
    }

    // Bird Physics
    velocity += gravity;
    birdY += velocity;
    ctx.fillStyle = 'yellow';
    ctx.fillRect(birdX, birdY, 20, 20);

    // Pipe Management
    pipes.forEach(p => {
        p.x -= 2;
        ctx.fillStyle = 'green';
        ctx.fillRect(p.x, 0, 50, p.top);
        ctx.fillRect(p.x, p.top + 150, 50, canvas.height);

        // Collision Detection
        if (birdX < p.x + 50 && birdX + 20 > p.x && (birdY < p.top || birdY + 20 > p.top + 150)) {
            isGameOver = true;
        }
        // Score tracking
        if (p.x === 50) score++;
    });

    // Add new pipes
    if (pipes[0].x < -50) {
        pipes.shift();
        pipes.push({x: 320, top: Math.random() * 200 + 50});
    }

    // Floor/Ceiling Death condition
    if (birdY > canvas.height || birdY < 0) isGameOver = true;

    // HUD
    ctx.fillStyle = 'white';
    ctx.font = '20px Arial';
    ctx.fillText("Score: " + score, 10, 30);
    
    requestAnimationFrame(draw);
}

// Controls: Click or Spacebar
function jumpAction() {
    if (isGameOver) {
        resetGame();
        draw();
    } else {
        velocity = jump;
    }
}

window.addEventListener('mousedown', jumpAction);
window.addEventListener('keydown', (e) => {
    if (e.code === 'Space') jumpAction();
});

draw();

</script> Make a game like this