function Bird() { const [position, setPosition] = useState(200); const [velocity, setVelocity] = useState(0); const birdRef = useRef(null); const jump = useCallback(()=>{ setVelocity(-8); }, []); useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.code === "Space") { e.preventDefault(); jump(); } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ jump ]); useEffect(()=>{ const gravity = 0.5; const interval = setInterval(()=>{ setPosition((prev)=>Math.min(Math.max(0, prev + velocity), 400)); setVelocity((prev)=>prev + gravity); }, 20); return ()=>clearInterval(interval); }, [ velocity ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[500px] bg-[#87CEEB] relative", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: birdRef, onClick: jump, className: "absolute left-[50%] cursor-pointer text-4xl transform -translate-x-1/2", style: { top: `${position}px` }, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "🐦")); } function BirdStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Bird, { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this })); } function Pipe() { const [position, setPosition] = useState(100); useEffect(()=>{ const interval = setInterval(()=>{ setPosition((prev)=>{ if (prev <= -20) return 100; return prev - 0.5; }); }, 16); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px] bg-[#87CEEB] overflow-hidden", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-[80px] bg-[#228B22]", style: { left: `${position}vw`, height: "200px", transform: "translateX(-50%)" }, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[100px] h-[20px] bg-[#228B22] relative left-[-10px]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }))); } function PipeStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Pipe, { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameStarted, setGameStarted] = useState(false); const [gameOver, setGameOver] = useState(false); const [score, setScore] = useState(0); const [birdPosition, setBirdPosition] = useState(300); const [pipePositions, setPipePositions] = useState([]); const gravity = 4; const jumpForce = 70; const pipeSpeed = 3; const pipeWidth = 60; const pipeGap = 200; useEffect(()=>{ if (!gameStarted) return; const gameLoop = setInterval(()=>{ setBirdPosition((pos)=>pos + gravity); setPipePositions((pipes)=>pipes.map((x)=>x - pipeSpeed).filter((x)=>x > -pipeWidth)); if (pipePositions.length === 0 || pipePositions[pipePositions.length - 1] < 400) { setPipePositions((pipes)=>[ ...pipes, 800 ]); } const hitPipe = pipePositions.some((pipeX)=>{ const birdRect = { x: 100, y: birdPosition, width: 40, height: 40 }; const upperPipe = { x: pipeX, y: 0, width: pipeWidth, height: birdPosition - pipeGap / 2 }; const lowerPipe = { x: pipeX, y: birdPosition + pipeGap / 2, width: pipeWidth, height: 600 }; return birdRect.x < upperPipe.x + upperPipe.width && birdRect.x + birdRect.width > upperPipe.x && birdRect.y < upperPipe.y + upperPipe.height || birdRect.x < lowerPipe.x + lowerPipe.width && birdRect.x + birdRect.width > lowerPipe.x && birdRect.y + birdRect.height > lowerPipe.y; }); if (hitPipe || birdPosition > 600 || birdPosition < 0) { setGameOver(true); setGameStarted(false); } setScore((prevScore)=>{ const passedPipe = pipePositions.some((x)=>x === 97); return passedPipe ? prevScore + 1 : prevScore; }); }, 20); return ()=>clearInterval(gameLoop); }, [ gameStarted, pipePositions, birdPosition ]); const handleClick = ()=>{ if (gameOver) { setGameOver(false); setScore(0); setBirdPosition(300); setPipePositions([]); } if (!gameStarted) { setGameStarted(true); } setBirdPosition((pos)=>pos - jumpForce); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#87CEEB] h-screen w-full relative overflow-hidden", onClick: handleClick, __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-5 left-5 text-white text-3xl font-bold", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement(React.Fragment, null), pipePositions.map((x, i)=>/*#__PURE__*/ React.createElement("div", { key: i, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null))), gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Game Over!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Click anywhere to restart"))), !gameStarted && !gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-2xl font-bold", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Click to start"))); }