Untitled
unknown
plain_text
a year ago
3.7 kB
6
Indexable
const gameContainer = document.getElementById("game-container");
const bird = document.getElementById("bird");
const scoreDisplay = document.getElementById("score");
const gameOverDisplay = document.getElementById("game-over");
const restartButton = document.getElementById("restart");
let birdY = 250;
let birdVelocity = 0;
let gravity = 0.5;
let isGameOver = false;
let pipes = [];
let score = 0;
// Create pipes
function createPipe() {
const pipeGap = 150;
const pipeHeight = Math.random() * 200 + 100;
const pipeTop = document.createElement("div");
pipeTop.classList.add("pipe", "pipe-top");
pipeTop.style.height = pipeHeight + "px";
pipeTop.style.right = "0";
const pipeBottom = document.createElement("div");
pipeBottom.classList.add("pipe", "pipe-bottom");
pipeBottom.style.height = gameContainer.clientHeight - pipeHeight - pipeGap + "px";
pipeBottom.style.right = "0";
gameContainer.appendChild(pipeTop);
gameContainer.appendChild(pipeBottom);
pipes.push({ top: pipeTop, bottom: pipeBottom, passed: false });
}
// Move pipes
function movePipes() {
pipes.forEach((pipe, index) => {
const pipeTop = pipe.top;
const pipeBottom = pipe.bottom;
const pipeRight = parseInt(pipeTop.style.right);
const pipeWidth = 50;
if (pipeRight > gameContainer.clientWidth + pipeWidth) {
pipeTop.remove();
pipeBottom.remove();
pipes.splice(index, 1);
} else {
pipeTop.style.right = pipeRight + 2 + "px";
pipeBottom.style.right = pipeRight + 2 + "px";
}
// Scoring
const pipeLeft = gameContainer.clientWidth - pipeRight - pipeWidth;
if (!pipe.passed && pipeLeft < 50) {
score++;
scoreDisplay.textContent = `Score: ${score}`;
pipe.passed = true;
}
});
}
// Bird mechanics
function updateBird() {
birdVelocity += gravity;
birdY += birdVelocity;
bird.style.top = birdY + "px";
if (birdY + bird.offsetHeight >= gameContainer.clientHeight || birdY <= 0) {
endGame();
}
}
// Collision detection
function checkCollision() {
const birdRect = bird.getBoundingClientRect();
for (const pipe of pipes) {
const pipeTopRect = pipe.top.getBoundingClientRect();
const pipeBottomRect = pipe.bottom.getBoundingClientRect();
if (
birdRect.right > pipeTopRect.left &&
birdRect.left < pipeTopRect.right &&
(birdRect.top < pipeTopRect.bottom || birdRect.bottom > pipeBottomRect.top)
) {
endGame();
}
}
}
// End game
function endGame() {
isGameOver = true;
gameOverDisplay.classList.remove("hidden");
clearInterval(gameInterval);
}
// Restart game
function restartGame() {
isGameOver = false;
pipes.forEach((pipe) => {
pipe.top.remove();
pipe.bottom.remove();
});
pipes = [];
birdY = 250;
birdVelocity = 0;
score = 0;
scoreDisplay.textContent = "Score: 0";
gameOverDisplay.classList.add("hidden");
gameInterval = setInterval(gameLoop, 20);
}
// Game loop
function gameLoop() {
if (!isGameOver) {
updateBird();
movePipes();
checkCollision();
}
}
// Control bird
document.addEventListener("keydown", () => {
if (!isGameOver) {
birdVelocity = -10;
}
});
// Pipe creation interval
setInterval(() => {
if (!isGameOver) {
createPipe();
}
}, 2000);
// Restart button click
restartButton.addEventListener("click", restartGame);
// Start the game
let gameInterval = setInterval(gameLoop, 20);
Editor is loading...
Leave a Comment