Untitled
unknown
plain_text
23 days ago
3.7 kB
2
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