<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flappy Bird Game</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; overflow: hidden; }
#gameContainer {
position: relative;
width: 100vw;
height: 100vh;
background: url('https://freeimage.host/i/2mORBt9') no-repeat center center;
background-size: cover;
}
#bird {
position: absolute;
width: 60px;
height: 60px;
background: url('https://freeimage.host/i/2mONmdl') no-repeat center center;
background-size: cover;
top: 200px;
left: 100px;
}
.pipe {
position: absolute;
width: 80px;
background: url('https://i.postimg.cc/pdBBVgZs/Pipe.png') no-repeat center;
background-size: contain;
}
#startBtn, #restartBtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem 2rem;
font-size: 1.2rem;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 8px;
z-index: 1000;
}
#restartBtn { display: none; }
#score {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
color: white;
font-weight: bold;
z-index: 100;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="score">Score: 0</div>
<div id="bird"></div>
<button id="startBtn">Start Game</button>
<button id="restartBtn">Restart</button>
</div>
<script>
const bird = document.getElementById("bird");
const startBtn = document.getElementById("startBtn");
const restartBtn = document.getElementById("restartBtn");
const gameContainer = document.getElementById("gameContainer");
const scoreDisplay = document.getElementById("score");
let gameInterval, gravityInterval, birdTop = 200, velocity = 0, gravity = 0.6;
let isGameRunning = false;
let pipes = [];
let score = 0;
function startGame() {
resetGame();
isGameRunning = true;
startBtn.style.display = "none";
restartBtn.style.display = "none";
gravityInterval = setInterval(() => {
velocity += gravity;
birdTop += velocity;
bird.style.top = birdTop + "px";
if (birdTop > window.innerHeight || birdTop < 0) gameOver();
}, 20);
gameInterval = setInterval(generatePipe, 1500);
}
function resetGame() {
birdTop = 200;
velocity = 0;
bird.style.top = birdTop + "px";
pipes.forEach(pipe => pipe.remove());
pipes = [];
score = 0;
scoreDisplay.textContent = "Score: 0";
}
function generatePipe() {
const gap = 150;
const pipeTopHeight = Math.floor(Math.random() * (window.innerHeight - gap - 100)) + 50;
const pipeBottomHeight = window.innerHeight - pipeTopHeight - gap;
const topPipe = document.createElement("div");
const bottomPipe = document.createElement("div");
topPipe.classList.add("pipe");
bottomPipe.classList.add("pipe");
topPipe.style.height = pipeTopHeight + "px";
topPipe.style.top = "0px";
topPipe.style.left = window.innerWidth + "px";
bottomPipe.style.height = pipeBottomHeight + "px";
bottomPipe.style.bottom = "0px";
bottomPipe.style.left = window.innerWidth + "px";
gameContainer.appendChild(topPipe);
gameContainer.appendChild(bottomPipe);
pipes.push(topPipe, bottomPipe);
let pipeInterval = setInterval(() => {
let pipeLeft = parseInt(topPipe.style.left);
if (!isGameRunning || pipeLeft < -80) {
clearInterval(pipeInterval);
topPipe.remove();
bottomPipe.remove();
pipes = pipes.filter(p => p !== topPipe && p !== bottomPipe);
return;
}
pipeLeft -= 3;
topPipe.style.left = pipeLeft + "px";
bottomPipe.style.left = pipeLeft + "px";
if (pipeLeft + 80 === 100) {
score++;
scoreDisplay.textContent = "Score: " + score;
}
const birdRect = bird.getBoundingClientRect();
const topRect = topPipe.getBoundingClientRect();
const bottomRect = bottomPipe.getBoundingClientRect();
if (
(birdRect.right > topRect.left && birdRect.left < topRect.right && birdRect.top < topRect.bottom) ||
(birdRect.right > bottomRect.left && birdRect.left < bottomRect.right && birdRect.bottom > bottomRect.top)
) {
gameOver();
}
}, 20);
}
function gameOver() {
clearInterval(gravityInterval);
clearInterval(gameInterval);
isGameRunning = false;
restartBtn.style.display = "block";
}
function jump() {
if (!isGameRunning) return;
velocity = -10;
}
document.addEventListener("keydown", e => {
if (e.code === "Space" || e.code === "ArrowUp") jump();
});
document.addEventListener("touchstart", () => jump());
startBtn.addEventListener("click", startGame);
restartBtn.addEventListener("click", startGame);
</script>
</body>
</html>
0 Comments