function MainComponent() { const [birdPosition, setBirdPosition] = React.useState(250); const [gameStarted, setGameStarted] = React.useState(false); const [intervalIds, setIntervalIds] = React.useState({}); const [obstacleLeft, setObstacleLeft] = React.useState(100); const [obstacleHeight, setObstacleHeight] = React.useState(150); const gravity = 2; const jumpHeight = 70; const gameAreaHeight = 600; const obstacleWidth = 60; const spaceBetweenObstacles = 200; const handleStartGame = ()=>{ if (!gameStarted) { setGameStarted(true); setBirdPosition(250); setObstacleLeft(100); setObstacleHeight(getRandomObstacleHeight()); const gameIntervalId = setInterval(()=>{ setBirdPosition((prevPosition)=>prevPosition <= 0 ? 0 : prevPosition - gravity); }, 24); const obstacleIntervalId = setInterval(()=>{ setObstacleLeft((prevLeft)=>prevLeft <= -obstacleWidth ? 100 : prevLeft - 5); }, 24); setIntervalIds({ gameIntervalId, obstacleIntervalId }); } }; const handleGameOver = ()=>{ Object.values(intervalIds).forEach(clearInterval); setGameStarted(false); }; const handleJump = ()=>{ setBirdPosition(birdPosition + jumpHeight >= gameAreaHeight ? gameAreaHeight : birdPosition + jumpHeight); }; const handleClick = ()=>{ if (gameStarted) { handleJump(); } else { handleStartGame(); } }; React.useEffect(()=>{ if (gameStarted) { if (obstacleLeft <= -obstacleWidth) { setObstacleLeft(100); setObstacleHeight(getRandomObstacleHeight()); } if (birdPosition >= gameAreaHeight || birdPosition <= 0 || obstacleLeft <= 20 + obstacleWidth && obstacleLeft >= -obstacleWidth && (birdPosition < obstacleHeight || birdPosition > obstacleHeight + spaceBetweenObstacles)) { handleGameOver(); } } }, [ birdPosition, gameStarted, intervalIds, obstacleLeft ]); const getRandomObstacleHeight = ()=>Math.floor(Math.random() * (gameAreaHeight - spaceBetweenObstacles)); const birdStyle = { position: 'absolute', bottom: birdPosition + 'px', left: '20px', backgroundColor: '#f8e100', width: '40px', height: '40px', borderRadius: '50%', transition: 'bottom 0.24s' }; const obstacleStyle = { position: 'absolute', backgroundColor: '#228b22', width: `${obstacleWidth}px`, left: `${obstacleLeft}px` }; const topObstacleStyle = { ...obstacleStyle, height: `${obstacleHeight}px`, bottom: `${gameAreaHeight}px` }; const bottomObstacleStyle = { ...obstacleStyle, height: `${gameAreaHeight - obstacleHeight - spaceBetweenObstacles}px`, top: `${gameAreaHeight}px` }; return /*#__PURE__*/ React.createElement("div", { onClick: handleClick, className: "flex flex-col items-center justify-center bg-[#70c5ce] w-full", style: { height: `${gameAreaHeight}px`, position: 'relative', overflow: 'hidden' }, __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: birdStyle, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: topObstacleStyle, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: bottomObstacleStyle, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }), !gameStarted && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 w-full text-center font-roboto text-2xl text-white", __source: { fileName: "", lineNumber: 89, columnNumber: 25 }, __self: this }, "Tap to start the game")); }