{"/styles.css":{"code":".app {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: #333;\n}"},"/App.js":{"code":"import { useEffect, useState } from \"react\";\n\nexport default function App() {\n const [birdY, setBirdY] = useState(150);\n const [velocity, setVelocity] = useState(0);\n const [pipes, setPipes] = useState([{ x: 400, gapY: 120 }]);\n const [score, setScore] = useState(0);\n const [highScore, setHighScore] = useState(0);\n const [gameOver, setGameOver] = useState(false);\n\n const [theme, setTheme] = useState(\"day\");\n const [birdSkin, setBirdSkin] = useState(\"yellow\");\n\n const birdSkins = {\n yellow: \"🐤\",\n blue: \"🐦\",\n duck: \"🦆\",\n cool: \"😎\",\n };\n\n const themes = {\n day: \"bg-sky-300\",\n night: \"bg-gray-900\",\n sunset: \"bg-gradient-to-br from-orange-400 to-pink-500\",\n };\n\n // ✅ FIXED PHYSICS\n const gravity = 0.4;\n const jump = -6;\n\n const handleJump = () => {\n if (gameOver) return;\n setVelocity(jump);\n };\n\n // Load high score\n useEffect(() => {\n const saved = localStorage.getItem(\"flappyHighScore\");\n if (saved) setHighScore(Number(saved));\n }, []);\n\n // Game loop\n useEffect(() => {\n if (gameOver) return;\n\n const loop = setInterval(() => {\n setBirdY(y => y + velocity);\n\n // ✅ velocity cap added\n setVelocity(v => Math.min(v + gravity, 8));\n\n // Move pipes\n setPipes(prev => prev.map(p => ({ ...p, x: p.x - 2 })));\n\n // Add pipes\n setPipes(prev => {\n if (prev[prev.length - 1].x < 250) {\n return [...prev, { x: 400, gapY: Math.random() * 150 + 80 }];\n }\n return prev;\n });\n\n // Remove pipes + score\n setPipes(prev => {\n if (prev[0].x < -60) {\n setScore(s => s + 1);\n return prev.slice(1);\n }\n return prev;\n });\n\n // Collision\n pipes.forEach(p => {\n const hit =\n p.x < 70 &&\n p.x + 60 > 50 &&\n (birdY < p.gapY || birdY > p.gapY + 120);\n\n if (hit) {\n setGameOver(true);\n\n if (score > highScore) {\n setHighScore(score);\n localStorage.setItem(\"flappyHighScore\", score);\n }\n }\n });\n\n // Ground / ceiling\n if (birdY > 280 || birdY < 0) {\n setGameOver(true);\n\n if (score > highScore) {\n setHighScore(score);\n localStorage.setItem(\"flappyHighScore\", score);\n }\n }\n\n }, 20);\n\n return () => clearInterval(loop);\n }, [velocity, pipes, birdY, gameOver, score, highScore]);\n\n const restart = () => {\n setBirdY(150);\n setVelocity(0);\n setPipes([{ x: 400, gapY: 120 }]);\n setScore(0);\n setGameOver(false);\n };\n\n return (\n \n

🐤 Flappy Game

Score: {score}

🏆 High Score: {highScore}

\n\n {/* Themes */}\n

\n {Object.keys(themes).map(t => (\n setTheme(t)}\n className=\"bg-white px-2 py-1 rounded text-sm\"\n >\n {t}\n \n ))}\n

\n\n {/* Skins */}\n

\n {Object.keys(birdSkins).map(c => (\n setBirdSkin(c)}\n className=\"bg-white px-2 py-1 rounded text-sm\"\n >\n {birdSkins[c]}\n \n ))}\n

\n\n {/* Game */}\n

\n \n {/* Bird */}\n \n {birdSkins[birdSkin]}\n

\n\n {/* Pipes */}\n {pipes.map((p, i) => (\n

\n \n \n

\n ))}\n\n {/* Game Over */}\n {gameOver && (\n

Game Over

\n \n Restart\n \n\n {\n localStorage.removeItem(\"flappyHighScore\");\n setHighScore(0);\n }}\n className=\"bg-red-400 mt-2 px-3 py-1 rounded\"\n >\n Reset High Score\n \n

\n )}\n \n\n

Tap anywhere to jump 📱

\n \n );\n}"},"/index.js":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n\n \n \n My App\n\n\n

\n\n"}}

Flappy bird game by starlight (zuri)