HTMLify

document.addEventListener('DOMContentLoaded', () => { const gameContainer = document.getElementById('game-container'); const player = document.getElementById('player'); const scoreDisplay = document.getElementById('score-display'); const startScreen = document.getElementById('start-screen'); const gameOverScreen = document.getElementById('game-over-screen'); const startButton = document.getElementById('start-button'); const restartButton = document.getElementById('restart-button'); const finalScoreDisplay = document.getElementById('final-score'); let playerTop; let playerLeft; let playerVelocity; let gravity; let jumpStrength; let isGameOver; let score; let gameLoopInterval; let pipeGeneratorInterval; let gameSpeed; let GAME_WIDTH = gameContainer.clientWidth; let GAME_HEIGHT = gameContainer.clientHeight; const PLAYER_WIDTH = 40; const PLAYER_HEIGHT = 40; const PIPE_WIDTH = 60; const PIPE_GAP = 180; function initializeGame() { GAME_WIDTH = gameContainer.clientWidth; GAME_HEIGHT = gameContainer.clientHeight; playerTop = GAME_HEIGHT / 2 - PLAYER_HEIGHT / 2; playerLeft = GAME_WIDTH / 4; playerVelocity = 0; gravity = 0.4; jumpStrength = -8; gameSpeed = 3; isGameOver = false; score = 0; player.style.top = playerTop + 'px'; player.style.left = playerLeft + 'px'; player.style.transform = 'rotate(0deg)'; scoreDisplay.textContent = score; document.querySelectorAll('.pipe').forEach(pipe => pipe.remove()); gameOverScreen.classList.add('hidden'); gameContainer.classList.remove('game-over'); } function jump() { if (!isGameOver) { playerVelocity = jumpStrength; player.style.transform = 'rotate(-20deg)'; } } function gameLoop() { if (isGameOver) return; playerVelocity += gravity; playerTop += playerVelocity; player.style.top = playerTop + 'px'; if (playerVelocity > 2) { player.style.transform = 'rotate(20deg)'; } if (playerTop <= 0 || playerTop + PLAYER_HEIGHT >= GAME_HEIGHT) { endGame(); return; } document.querySelectorAll('.pipe').forEach(pipe => { let pipeLeft = parseFloat(pipe.style.left); pipeLeft -= gameSpeed; pipe.style.left = pipeLeft + 'px'; if (pipeLeft + PIPE_WIDTH < 0) { pipe.remove(); } if (!pipe.passed && pipeLeft + PIPE_WIDTH < playerLeft) { score++; scoreDisplay.textContent = score; pipe.passed = true; } const playerRect = player.getBoundingClientRect(); const pipeRect = pipe.getBoundingClientRect(); if ( playerRect.right > pipeRect.left && playerRect.left < pipeRect.right && playerRect.bottom > pipeRect.top && playerRect.top < pipeRect.bottom ) { endGame(); } }); } function generatePipes() { if (isGameOver) return; const gapTop = Math.random() * (GAME_HEIGHT - PIPE_GAP - 100) + 50; const topPipe = document.createElement('div'); topPipe.classList.add('pipe', 'top'); topPipe.style.height = gapTop + 'px'; topPipe.style.left = GAME_WIDTH + 'px'; topPipe.style.top = '0px'; gameContainer.appendChild(topPipe); const bottomPipe = document.createElement('div'); bottomPipe.classList.add('pipe', 'bottom'); bottomPipe.style.height = GAME_HEIGHT - gapTop - PIPE_GAP + 'px'; bottomPipe.style.left = GAME_WIDTH + 'px'; bottomPipe.style.bottom = '0px'; gameContainer.appendChild(bottomPipe); } function startGame() { initializeGame(); startScreen.classList.add('hidden'); gameLoopInterval = setInterval(gameLoop, 20); pipeGeneratorInterval = setInterval(generatePipes, 1800); } function endGame() { if (isGameOver) return; isGameOver = true; clearInterval(gameLoopInterval); clearInterval(pipeGeneratorInterval); finalScoreDisplay.textContent = score; gameOverScreen.classList.remove('hidden'); } startButton.addEventListener('click', startGame); restartButton.addEventListener('click', startGame); document.addEventListener('click', (e) => { if (!isGameOver && !startScreen.contains(e.target) && !gameOverScreen.contains(e.target)) { jump(); } }); document.addEventListener('keydown', (e) => { if (e.code === 'Space') { if (!isGameOver) { jump(); } else if (gameOverScreen.classList.contains('hidden')) { startGame(); } } }); window.addEventListener('resize', () => { initializeGame(); }); });