<!
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;
padding: 0;
background-image: url('background.png');
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
position: relative;
}
#bird {
width: 50px;
height: 45px;
position: absolute;
background-image: url('b.png');
background-size: contain;
transition: transform 0.1s;
}
.pipe {
width: 80px;
height: 400px;
position: absolute;
background-image: url('pipe.png');
background-size: contain;
}
#gameOverScreen {
display: none;
position: absolute;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
border-radius: 10px;
}
#startScreen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="bird"></div>
<div id="gameOverScreen">
<h1>Game Over!</h1>
<p>Score: <span id="score"></span></p>
<button onclick="restartGame()">Restart</button>
</div>
<div id="startScreen">
<h1>Tap to Start</h1>
<p>Press Spacebar to Fly</p>
</div>
<script>
let bird = document.getElementById("bird");
let gravity = 0.20;
let velocity = 0;
let jump = -4;
let gameRunning = false;
let score = 0;
function flap() {
if (!gameRunning) {
gameRunning = true;
document.getElementById("startScreen").style.display = "none";
gameLoop();
}
velocity += jump;
}
document.addEventListener('keydown', function(event) {
if (event.key === " " && gameRunning) {
flap();
}
});
function gameLoop() {
if (!gameRunning) return;
// Bird's movement
velocity += gravity;
bird.style.top = (bird.offsetTop + velocity) + "px";
// Collision detection
if (bird.offsetTop <= 0 || bird.offsetTop + bird.offsetHeight >=
window.innerHeight) {
gameOver();
return;
}
// Move pipes
let pipes = document.querySelectorAll(".pipe");
pipes.forEach(pipe => {
pipe.style.left = (pipe.offsetLeft - 5) + "px";
// Remove pipes that are out of screen
if (pipe.offsetLeft + pipe.offsetWidth < 0) {
pipe.parentNode.removeChild(pipe);
}
// Collision detection with pipes
if (bird.offsetLeft + bird.offsetWidth > pipe.offsetLeft &&
bird.offsetLeft < pipe.offsetLeft + pipe.offsetWidth &&
bird.offsetTop + bird.offsetHeight > pipe.offsetTop &&
bird.offsetTop < pipe.offsetTop + pipe.offsetHeight) {
gameOver();
return;
}
// Increase score when bird passes through pipe
if (pipe.offsetLeft + pipe.offsetWidth < bird.offsetLeft && !
pipe.passed) {
pipe.passed = true;
score++;
document.getElementById("score").textContent = score;
}
});
requestAnimationFrame(gameLoop);
}
function spawnPipes() {
if (!gameRunning) return;
let pipeHeight = Math.random() * 300 + 50;
let pipe = document.createElement("div");
pipe.classList.add("pipe");
pipe.style.left = window.innerWidth + "px";
pipe.style.height = pipeHeight + "px";
pipe.style.top = "0px";
pipe.passed = false; // New property to track if the bird passed this
pipe
document.body.appendChild(pipe);
let pipe2 = document.createElement("div");
pipe2.classList.add("pipe");
pipe2.style.left = window.innerWidth + "px";
pipe2.style.height = (window.innerHeight - pipeHeight - 150) + "px";
pipe2.style.bottom = "0px";
pipe2.passed = false; // New property to track if the bird passed this
pipe
document.body.appendChild(pipe2);
}
function gameOver() {
gameRunning = false;
document.getElementById("gameOverScreen").style.display = "block";
document.getElementById("score").textContent = score;
}
function restartGame() {
location.reload();
}
setInterval(spawnPipes, 2000);
</script>
</body>
</html>
