<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird</title>
<style>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #70c5ce;
}
#game {
position: relative;
width: 400px;
height: 600px;
background-image: url('https://iili.io/3CfB5Ab.png'); /* Background image */
background-size: cover;
background-position: center;
border: 2px solid #000;
overflow: hidden;
}
#bird {
position: absolute;
top: 50%;
left: 50px;
width: 40px;
height: 40px;
background-image: url('https://iili.io/3Cfcdfn.png'); /* Bird image */
background-size: cover;
background-position: center;
}
.pipe {
position: absolute;
width: 60px;
background-image: url('https://iili.io/3CfBuSe.png'); /* Pillar image */
background-size: cover;
background-position: center;
}
#score {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: white;
font-family: Arial, sans-serif;
z-index: 10;
}
#restartButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 20px;
color: white;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
display: none;
z-index: 10;
}
#restartButton:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id="game">
<div id="bird"></div>
<div id="score">0</div>
<button id="restartButton">Restart</button>
</div>

let birdTop = 250;
let gravity = 2; // Initial gravity
let score = 0;
let pipes = [];
let gameInterval;
let pipeInterval;
let pipeGap = 200; // Initial gap between pillars
let pipeSpeed = 2; // Initial speed of pillars

function startGame() {
birdTop = 250;
score = 0;
pipes = [];
gravity = 2; // Reset gravity
pipeGap = 200; // Reset pillar gap
pipeSpeed = 2; // Reset pillar speed
scoreDisplay.innerText = score;
restartButton.style.display = 'none';
clearInterval(gameInterval);
clearInterval(pipeInterval);
gameInterval = setInterval(updateGame, 20);
pipeInterval = setInterval(createPipe, 2000);
}

function updateGame() {
birdTop += gravity;
bird.style.top = birdTop + 'px';

// Check if bird hits the ground or sky
if (birdTop <= 0 || birdTop >= 560) {
endGame();
}

// Move pipes and check for collisions
pipes.forEach(pipe => {
pipe.left -= pipeSpeed; // Use pipeSpeed for pillar movement
pipe.element.style.left = pipe.left + 'px';

// Remove off-screen pipes and increase score
if (pipe.left + 60 < 0) {
pipe.element.remove();
pipes.shift();
score++;
scoreDisplay.innerText = score;

// Gradually increase difficulty
if (score % 5 === 0) {
pipeGap = Math.max(100, pipeGap - 10); // Decrease gap (minimum 100)
gravity += 0.2; // Increase gravity (bird falls faster)
pipeSpeed += 0.2; // Increase pillar speed
}
}

// Check for collisions
if (collision(bird, pipe.element)) {
endGame();
}
});
}

function createPipe() {
const pipeHeight = Math.floor(Math.random() * (400 - 100)) + 100;
const pipeTop = document.createElement('div');
const pipeBottom = document.createElement('div');

pipeTop.classList.add('pipe');
pipeBottom.classList.add('pipe');

pipeTop.style.height = pipeHeight + 'px';
pipeTop.style.top = '0';
pipeTop.style.left = '400px';

pipeBottom.style.height = (600 - pipeHeight - pipeGap) + 'px';
pipeBottom.style.bottom = '0';
pipeBottom.style.left = '400px';

game.appendChild(pipeTop);
game.appendChild(pipeBottom);

pipes.push({ element: pipeTop, left: 400 });
pipes.push({ element: pipeBottom, left: 400 });
}

function collision(bird, pipe) {
const birdRect = bird.getBoundingClientRect();
const pipeRect = pipe.getBoundingClientRect();

return !(
birdRect.top > pipeRect.bottom ||
birdRect.bottom < pipeRect.top ||
birdRect.right < pipeRect.left ||
birdRect.left > pipeRect.right
);
}

function endGame() {
clearInterval(gameInterval);
clearInterval(pipeInterval);
restartButton.style.display = 'block';
}

// Keyboard controls
document.addEventListener('keydown', () => {
birdTop -= 50;
});

// Touch controls for mobile
document.addEventListener('touchstart', () => {
birdTop -= 50;
});

// Restart button
restartButton.addEventListener('click', () => {
// Remove all pipes from the game
document.querySelectorAll('.pipe').forEach(pipe => pipe.remove());
startGame();
});

startGame();
</script>
</body>
</html>