Flappy Bird with Slots

// This val creates a Flappy Bird game with a slot machine feature that randomly activates // and adds new features throughout the game. It uses React for rendering the UI and // manages game state on the client-side. The game logic is implemented using // requestAnimationFrame for smooth animation. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const GAME_WIDTH = 400; const GAME_HEIGHT = 600; const GRAVITY = 0.5; const JUMP_STRENGTH = -10; const PIPE_WIDTH = 60; const PIPE_GAP = 200; function Bird({ y, invincible }) { return (

🐤

); } function Pipe({ x, height, isTop, isGhost }) { return (

); } function GameOver({ score, onRestart }) { return (

Game Over

Score: {score}

); } function BloodEffect({ x, y }) { return (

); } function SlotMachine({ spinning, result, onSpin }) { return (

🎰

{spinning ? (

Spinning...

) : ( <>

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

)}

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

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

Score: {score}

{gameOver && } {bloodEffects.map((effect, index) => )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Flappy Bird with Slots

Press Space or click to jump!

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

View source

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } @keyframes expand { from { transform: scale(0); } to { transform: scale(1); } } `; export default server;

flaapyclone

Version 1