Flappy Bird with Slots

\n 🐤\n

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

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

Game Over

Score: {score}

\n \n

\n );\n}\n\nfunction BloodEffect({ x, y }) {\n return (\n

\n );\n}\n\nfunction SlotMachine({ spinning, result, onSpin }) {\n return (\n

🎰

\n {spinning ? (\n

Spinning...

\n ) : (\n <>\n

\n {result ? `Result: ${result}` : 'Spin the slot!'}\n

\n \n \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 const [bloodEffects, setBloodEffects] = useState([]);\n const [slotSpinning, setSlotSpinning] = useState(false);\n const [slotResult, setSlotResult] = useState('');\n const [activeFeatures, setActiveFeatures] = useState({\n invincibility: false,\n ghostPipes: false,\n slowMotion: false,\n });\n\n useEffect(() => {\n const handleKeyPress = (e) => {\n if (e.code === 'Space' && !gameOver) {\n jump();\n }\n };\n window.addEventListener('keydown', handleKeyPress);\n document.addEventListener('click', handleClick);\n return () => { window.removeEventListener('keydown', handleKeyPress); document.removeEventListener('click', handleClick); };\n }, [gameOver]);\n\n useEffect(() => {\n if (gameOver) return;\n\n const gameLoop = () => {\n setBirdY((prevY) => {\n const newY = prevY + birdVelocity * (activeFeatures.slowMotion ? 0.5 : 1);\n if ((newY < 0 || newY > GAME_HEIGHT) && !activeFeatures.invincibility) {\n setGameOver(true);\n setBloodEffects(prevEffects => [\n ...prevEffects,\n { x: 50, y: newY }\n ]);\n setTimeout(() => setBloodEffects([]), 500);\n return prevY;\n }\n return newY;\n });\n setBirdVelocity((prevVelocity) => prevVelocity + GRAVITY * (activeFeatures.slowMotion ? 0.5 : 1));\n\n setPipes((prevPipes) => {\n const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 * (activeFeatures.slowMotion ? 0.5 : 1) }))\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, isGhost: activeFeatures.ghostPipes });\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 !activeFeatures.invincibility &&\n !pipe.isGhost\n ) {\n setGameOver(true);\n setBloodEffects(prevEffects => [\n ...prevEffects,\n { x: birdLeft, y: birdY }\n ]);\n setTimeout(() => setBloodEffects([]), 500);\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 // Random slot machine activation\n if (Math.random() < 0.005 && !slotSpinning) {\n spinSlotMachine();\n }\n\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n };\n\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n return () => cancelAnimationFrame(gameLoopRef.current);\n }, [birdY, birdVelocity, gameOver, activeFeatures, slotSpinning]);\n\n const jump = () => {\n if (!gameOver) {\n setBirdVelocity(JUMP_STRENGTH);\n }\n };\n\n const handleClick = () => jump();\n\n const spinSlotMachine = () => {\n setSlotSpinning(true);\n setTimeout(() => {\n const features = ['Invincibility', 'Ghost Pipes', 'Slow Motion'];\n const result = features[Math.floor(Math.random() * features.length)];\n setSlotResult(result);\n setSlotSpinning(false);\n activateFeature(result);\n }, 2000);\n };\n\n const activateFeature = (feature) => {\n const newFeatures = { ...activeFeatures };\n switch (feature) {\n case 'Invincibility':\n newFeatures.invincibility = true;\n setTimeout(() => setActiveFeatures(prev => ({ ...prev, invincibility: false })), 10000);\n break;\n case 'Ghost Pipes':\n newFeatures.ghostPipes = true;\n setTimeout(() => setActiveFeatures(prev => ({ ...prev, ghostPipes: false })), 15000);\n break;\n case 'Slow Motion':\n newFeatures.slowMotion = true;\n setTimeout(() => setActiveFeatures(prev => ({ ...prev, slowMotion: false })), 8000);\n break;\n }\n setActiveFeatures(newFeatures);\n };\n\n const restartGame = () => {\n setBirdY(GAME_HEIGHT / 2);\n setBirdVelocity(0);\n setPipes([]);\n setScore(0);\n setBloodEffects([]);\n setGameOver(false);\n setActiveFeatures({\n invincibility: false,\n ghostPipes: false,\n slowMotion: false,\n });\n };\n\n return (\n

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

\n Score: {score}\n

\n \n {gameOver && }\n {bloodEffects.map((effect, index) => )}\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 with Slots\n \n \n \n

Press Space or click to jump!

Use the slot machine to activate special features! It may also spin randomly!

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 flex-direction: column;\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@keyframes expand {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/veddevv/flaapyclone/code/main.tsx","extension","actionData","errors"]