Flappy Bird

\n 🐤\n

\n );\n}\n\nfunction Pipe({ x, height, isTop }) {\n return (\n

\n );\n}\n\nfunction GameOver({ score, onRestart }) {\n return (\n

Game Over

Score: {score}

\n \n

\n );\n}\n\nfunction App() {\n const [birdY, setBirdY] = useState(GAME_HEIGHT / 2);\n const [birdVelocity, setBirdVelocity] = useState(0);\n const [pipes, setPipes] = useState([]);\n const [score, setScore] = useState(0);\n const [gameOver, setGameOver] = useState(false);\n const gameLoopRef = useRef();\n\n useEffect(() => {\n const handleKeyPress = (e) => {\n if (e.code === 'Space' && !gameOver) {\n setBirdVelocity(JUMP_STRENGTH);\n }\n };\n window.addEventListener('keydown', handleKeyPress);\n return () => window.removeEventListener('keydown', handleKeyPress);\n }, [gameOver]);\n\n useEffect(() => {\n if (gameOver) return;\n\n const gameLoop = () => {\n setBirdY((prevY) => {\n const newY = prevY + birdVelocity;\n if (newY < 0 || newY > GAME_HEIGHT) {\n setGameOver(true);\n return prevY;\n }\n return newY;\n });\n setBirdVelocity((prevVelocity) => prevVelocity + GRAVITY);\n\n setPipes((prevPipes) => {\n const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 }))\n .filter((pipe) => pipe.x + PIPE_WIDTH > 0);\n\n if (newPipes.length === 0 || newPipes[newPipes.length - 1].x < GAME_WIDTH - 200) {\n const height = Math.random() * (GAME_HEIGHT - PIPE_GAP);\n newPipes.push({ x: GAME_WIDTH, height });\n }\n\n // Check for collisions\n const birdRight = 80;\n const birdLeft = 50;\n newPipes.forEach((pipe) => {\n if (\n birdRight > pipe.x &&\n birdLeft < pipe.x + PIPE_WIDTH &&\n (birdY < pipe.height || birdY + 30 > pipe.height + PIPE_GAP)\n ) {\n setGameOver(true);\n }\n });\n\n // Update score\n if (newPipes[0] && newPipes[0].x + PIPE_WIDTH < 50 && !newPipes[0].passed) {\n setScore((prevScore) => prevScore + 1);\n newPipes[0].passed = true;\n }\n\n return newPipes;\n });\n\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n };\n\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n return () => cancelAnimationFrame(gameLoopRef.current);\n }, [birdY, birdVelocity, gameOver]);\n\n const restartGame = () => {\n setBirdY(GAME_HEIGHT / 2);\n setBirdVelocity(0);\n setPipes([]);\n setScore(0);\n setGameOver(false);\n };\n\n return (\n

\n \n {pipes.map((pipe, index) => (\n \n \n \n \n ))}\n

\n Score: {score}\n

\n {gameOver && }\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n Flappy Bird\n \n \n \n

Press Space to jump!

View source

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n`;\n\nexport default server;",[],[172],"files",[152,170],"counts",{"_182":32,"_183":101,"_184":32,"_185":186},"pulls","branches","forks","envVars",{"_187":32,"_188":32},"count","emptyCount","contents",[],{"_104":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":101,"_159":118,"_106":192,"_100":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":193},["D",1726141044162],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":202,"_150":207,"_178":214,"_162":215,"_189":218,"_219":-5,"_220":-5,"_221":-5,"_222":-5,"_223":224},{"_104":105,"_95":96,"_106":203,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":204,"_134":205,"_137":206,"_149":22},["D",1746279972329],{"_93":94,"_132":133},{"_93":94,"_136":133,"_14":114},{"_100":139,"_95":43,"_104":140,"_141":105,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[208,211],{"_104":153,"_95":99,"_154":155,"_156":-5,"_157":140,"_158":101,"_159":118,"_106":160,"_100":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":209,"_98":210},[],[99],{"_104":171,"_95":172,"_154":116,"_156":-5,"_157":140,"_158":101,"_159":22,"_106":173,"_100":32,"_161":174,"_163":175,"_165":22,"_166":-5,"_167":212,"_98":213},[],[172],[208,211],{"_104":153,"_157":140,"_154":155,"_95":99,"_163":164,"_161":162,"_100":32,"_156":-5,"_106":216,"_158":101,"_166":-5,"_98":217},["D",1726141044162],[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

veddevv

flaapyclone