<!
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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #70c5ce;
font-family: Arial, sans-serif;
overflow: hidden;
}
#game-container {
position: relative;
width: 400px;
height: 600px;
background-color: #70c5ce;
overflow: hidden;
border: 2px solid #000;
}
#bird {
position: absolute;
width: 40px;
height: 30px;
background-color: #ffcc00;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
left: 50px;
top: 300px;
z-index: 10;
}
.pipe {
position: absolute;
width: 60px;
background-color: #4CAF50;
right: -60px;
}
.pipe-top {
top: 0;
border-bottom: 2px solid #000;
}
.pipe-bottom {
bottom: 0;
border-top: 2px solid #000;
}
#score {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 20;
}
#game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 30;
color: white;
}
#game-over h1 {
font-size: 36px;
margin-bottom: 20px;
}
#restart-btn {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#restart-btn:hover {
background-color: #45a049;
}
#ground {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: #8B4513;
z-index: 5;
}
</style>
</head>
<body>
<div id="game-container">
<div id="bird"></div>
<div id="score">0</div>
<div id="ground"></div>
<div id="game-over">
<h1>Game Over!</h1>
<p id="final-score">Score: 0</p>
<button id="restart-btn">Play Again</button>
</div>
</div>
<script>
// Game variables
const bird = [Link]('bird');
const gameContainer = [Link]('game-container');
const scoreElement = [Link]('score');
const gameOverScreen = [Link]('game-over');
const finalScoreElement = [Link]('final-score');
const restartBtn = [Link]('restart-btn');
const ground = [Link]('ground');
let gravity = 0.5;
let birdVelocity = 0;
let birdPosition = 300;
let gameWidth = 400;
let gameHeight = 600;
let gap = 150;
let pipeWidth = 60;
let pipeSpeed = 2;
let pipes = [];
let score = 0;
let gameRunning = true;
let gameLoop;
let pipeGenerationInterval;
// Initialize game
function initGame() {
// Reset variables
birdVelocity = 0;
birdPosition = 300;
score = 0;
[Link] = score;
gameRunning = true;
// Clear existing pipes
[Link](pipe => {
if ([Link]) {
[Link]([Link]);
}
if ([Link]) {
[Link]([Link]);
}
});
pipes = [];
// Reset bird position
[Link] = birdPosition + 'px';
// Hide game over screen
[Link] = 'none';
// Start game loop
gameLoop = requestAnimationFrame(updateGame);
// Start generating pipes
pipeGenerationInterval = setInterval(generatePipes, 2000);
}
// Generate pipes
function generatePipes() {
if (!gameRunning) return;
let pipeTopHeight = [Link]([Link]() * (gameHeight - gap - 100)) + 20;
let pipeBottomHeight = gameHeight - pipeTopHeight - gap;
let topPipe = [Link]('div');
[Link] = 'pipe pipe-top';
[Link] = pipeTopHeight + 'px';
[Link] = '0px';
let bottomPipe = [Link]('div');
[Link] = 'pipe pipe-bottom';
[Link] = pipeBottomHeight + 'px';
[Link] = '0px';
[Link](topPipe);
[Link](bottomPipe);
[Link]({
topPipe: topPipe,
bottomPipe: bottomPipe,
passed: false
});
}
// Update game state
function updateGame() {
if (!gameRunning) return;
// Update bird position
birdVelocity += gravity;
birdPosition += birdVelocity;
[Link] = birdPosition + 'px';
// Check for collisions with ground or ceiling
if (birdPosition >= gameHeight - 30 || birdPosition <= 0) {
endGame();
return;
}
// Update pipes
for (let i = 0; i < [Link]; i++) {
let pipe = pipes[i];
let topPipe = [Link];
let bottomPipe = [Link];
// Move pipes
let currentRight = parseInt([Link]);
[Link] = (currentRight + pipeSpeed) + 'px';
[Link] = (currentRight + pipeSpeed) + 'px';
// Check for collisions
if (
(currentRight < 50 + 40 && currentRight + pipeWidth > 50) &&
(birdPosition < parseInt([Link]) ||
birdPosition + 30 > gameHeight - parseInt([Link]))
){
endGame();
return;
}
// Check if bird passed the pipe
if (![Link] && currentRight < 50) {
[Link] = true;
score++;
[Link] = score;
}
// Remove pipes that are off screen
if (currentRight > gameWidth) {
[Link](topPipe);
[Link](bottomPipe);
[Link](i, 1);
i--;
}
}
gameLoop = requestAnimationFrame(updateGame);
}
// End game
function endGame() {
gameRunning = false;
cancelAnimationFrame(gameLoop);
clearInterval(pipeGenerationInterval);
[Link] = 'Score: ' + score;
[Link] = 'flex';
}
// Jump when spacebar or mouse click
function jump() {
if (!gameRunning) return;
birdVelocity = -10;
}
// Event listeners
[Link]('keydown', function(e) {
if ([Link] === 'Space') {
jump();
}
});
[Link]('click', jump);
[Link]('click', initGame);
// Start the game
initGame();
</script>
</body>
</html>