[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Flappy Bird - Modern Edition', description: 'A modern take on the classic Flappy Bird game with smooth animations and sleek design', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.08 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.08 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.55 0 0); --accent: oklch(0.85 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.3 0 0); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.8 0 0); --chart-1: oklch(1 0 0); --chart-2: oklch(0.7 0 0); --chart-3: oklch(0.5 0 0); --chart-4: oklch(0.3 0 0); --chart-5: oklch(0.15 0 0); --radius: 0.25rem; --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.5 0 0); } .dark { --background: oklch(0.12 0.05 260); --foreground: oklch(0.98 0.02 240); --card: oklch(0.18 0.05 260); --card-foreground: oklch(0.98 0.02 240); --popover: oklch(0.18 0.05 260); --popover-foreground: oklch(0.98 0.02 240); --primary: oklch(0.65 0.22 260); --primary-foreground: oklch(0.12 0.05 260); --secondary: oklch(0.75 0.15 180); --secondary-foreground: oklch(0.12 0.05 260); --muted: oklch(0.25 0.05 260); --muted-foreground: oklch(0.65 0.05 260); --accent: oklch(0.68 0.18 320); --accent-foreground: oklch(0.12 0.05 260); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.98 0.02 240); --border: oklch(0.25 0.05 260); --input: oklch(0.25 0.05 260); --ring: oklch(0.65 0.22 260); --chart-1: oklch(0.65 0.22 260); --chart-2: oklch(0.75 0.15 180); --chart-3: oklch(0.68 0.18 320); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import FlappyBirdGame from '@/components/flappy-bird-game' export default function Page() { return (

) } [V0_FILE]typescriptreact:file="components/flappy-bird-game.tsx" isEdit="true" 'use client' import { useEffect, useRef, useState, useCallback } from 'react' import { Button } from '@/components/ui/button' import { Play, RotateCcw, Trophy, Volume2, VolumeX } from 'lucide-react' type GameState = 'idle' | 'playing' | 'gameOver' interface Pipe { x: number gapY: number passed: boolean } export default function FlappyBirdGame() { const canvasRef = useRef(null) const containerRef = useRef(null) const [gameState, setGameState] = useState('idle') const [score, setScore] = useState(0) const [bestScore, setBestScore] = useState(0) const [soundEnabled, setSoundEnabled] = useState(false) const [canvasWidth, setCanvasWidth] = useState(0) const [canvasHeight, setCanvasHeight] = useState(0) const BIRD_SIZE = 40 const PIPE_WIDTH = 80 const PIPE_GAP = 220 const GRAVITY = 0.6 const JUMP_FORCE = -11 const PIPE_SPEED = 4 const PIPE_SPACING = 300 // Game state refs const birdYRef = useRef(0) const birdVelocityRef = useRef(0) const pipesRef = useRef([]) const frameCountRef = useRef(0) const animationIdRef = useRef() useEffect(() => { const updateDimensions = () => { if (containerRef.current) { setCanvasWidth(window.innerWidth) setCanvasHeight(window.innerHeight) birdYRef.current = window.innerHeight / 2 } } updateDimensions() window.addEventListener('resize', updateDimensions) return () => window.removeEventListener('resize', updateDimensions) }, []) // Load best score from localStorage useEffect(() => { const saved = localStorage.getItem('flappyBestScore') if (saved) setBestScore(parseInt(saved)) }, []) const playSound = useCallback((frequency: number, duration: number) => { if (!soundEnabled) return try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.frequency.value = frequency oscillator.type = 'sine' gainNode.gain.setValueAtTime(0.1, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + duration) } catch (error) { // Silently fail if audio context is not supported } }, [soundEnabled]) const checkCollision = useCallback((birdY: number, pipes: Pipe[], birdX: number) => { // Check ground and ceiling if (birdY + BIRD_SIZE > canvasHeight || birdY < 0) { return true } // Check pipe collision for (const pipe of pipes) { if ( pipe.x < birdX + BIRD_SIZE && pipe.x + PIPE_WIDTH > birdX && (birdY < pipe.gapY || birdY + BIRD_SIZE > pipe.gapY + PIPE_GAP) ) { return true } } return false }, [canvasHeight, BIRD_SIZE, PIPE_WIDTH, PIPE_GAP]) const drawBird = useCallback((ctx: CanvasRenderingContext2D, y: number, birdX: number) => { // Bird shadow ctx.fillStyle = 'rgba(255, 255, 255, 0.1)' ctx.beginPath() ctx.arc(birdX + BIRD_SIZE / 2 + 3, y + BIRD_SIZE / 2 + 3, BIRD_SIZE / 2, 0, Math.PI * 2) ctx.fill() // Bird body - white circle ctx.fillStyle = 'white' ctx.beginPath() ctx.arc(birdX + BIRD_SIZE / 2, y + BIRD_SIZE / 2, BIRD_SIZE / 2, 0, Math.PI * 2) ctx.fill() // Bird eye ctx.fillStyle = 'black' ctx.beginPath() ctx.arc(birdX + BIRD_SIZE / 2 + 6, y + BIRD_SIZE / 2 - 3, 4, 0, Math.PI * 2) ctx.fill() }, [BIRD_SIZE]) const drawPipe = useCallback((ctx: CanvasRenderingContext2D, pipe: Pipe) => { // Main pipe body - white with black outline ctx.fillStyle = 'white' ctx.strokeStyle = 'black' ctx.lineWidth = 3 // Top pipe ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.gapY) ctx.strokeRect(pipe.x, 0, PIPE_WIDTH, pipe.gapY) // Top pipe cap ctx.fillRect(pipe.x - 5, pipe.gapY - 25, PIPE_WIDTH + 10, 25) ctx.strokeRect(pipe.x - 5, pipe.gapY - 25, PIPE_WIDTH + 10, 25) // Bottom pipe ctx.fillRect(pipe.x, pipe.gapY + PIPE_GAP, PIPE_WIDTH, canvasHeight - pipe.gapY - PIPE_GAP) ctx.strokeRect(pipe.x, pipe.gapY + PIPE_GAP, PIPE_WIDTH, canvasHeight - pipe.gapY - PIPE_GAP) // Bottom pipe cap ctx.fillRect(pipe.x - 5, pipe.gapY + PIPE_GAP, PIPE_WIDTH + 10, 25) ctx.strokeRect(pipe.x - 5, pipe.gapY + PIPE_GAP, PIPE_WIDTH + 10, 25) }, [canvasHeight, PIPE_WIDTH, PIPE_GAP]) const gameLoop = useCallback(() => { const canvas = canvasRef.current if (!canvas || canvasWidth === 0 || canvasHeight === 0) return const ctx = canvas.getContext('2d') if (!ctx) return ctx.fillStyle = 'black' ctx.fillRect(0, 0, canvasWidth, canvasHeight) const birdX = canvasWidth / 4 if (gameState === 'playing') { // Update bird physics birdVelocityRef.current += GRAVITY birdYRef.current += birdVelocityRef.current // Update pipes frameCountRef.current++ if (frameCountRef.current % Math.floor(PIPE_SPACING / PIPE_SPEED) === 0) { pipesRef.current.push({ x: canvasWidth, gapY: Math.random() * (canvasHeight - PIPE_GAP - 200) + 100, passed: false, }) } pipesRef.current = pipesRef.current.filter((pipe) => pipe.x > -PIPE_WIDTH) pipesRef.current.forEach((pipe) => { pipe.x -= PIPE_SPEED if (!pipe.passed && pipe.x + PIPE_WIDTH < birdX) { pipe.passed = true setScore((prev) => { const newScore = prev + 1 playSound(800, 0.1) return newScore }) } }) // Check collision if (checkCollision(birdYRef.current, pipesRef.current, birdX)) { setGameState('gameOver') playSound(200, 0.3) setScore((currentScore) => { if (currentScore > bestScore) { setBestScore(currentScore) localStorage.setItem('flappyBestScore', currentScore.toString()) } return currentScore }) return } } // Draw pipes pipesRef.current.forEach((pipe) => drawPipe(ctx, pipe)) // Draw bird drawBird(ctx, birdYRef.current, birdX) ctx.fillStyle = 'white' ctx.font = 'bold 72px monospace' ctx.textAlign = 'center' ctx.fillText(score.toString(), canvasWidth / 2, 100) if (gameState === 'playing') { animationIdRef.current = requestAnimationFrame(gameLoop) } }, [gameState, score, bestScore, checkCollision, drawBird, drawPipe, playSound, canvasWidth, canvasHeight, GRAVITY, PIPE_SPEED, PIPE_SPACING, PIPE_WIDTH]) useEffect(() => { if (gameState === 'playing') { animationIdRef.current = requestAnimationFrame(gameLoop) } return () => { if (animationIdRef.current) { cancelAnimationFrame(animationIdRef.current) } } }, [gameState, gameLoop]) const startGame = () => { birdYRef.current = canvasHeight / 2 birdVelocityRef.current = 0 pipesRef.current = [] frameCountRef.current = 0 setScore(0) setGameState('playing') } const handleJump = () => { if (gameState === 'playing') { birdVelocityRef.current = JUMP_FORCE playSound(600, 0.1) } } useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.code === 'Space' && gameState === 'playing') { e.preventDefault() handleJump() } } window.addEventListener('keydown', handleKeyPress) return () => window.removeEventListener('keydown', handleKeyPress) }, [gameState]) return (

) }

FLAPPY

GAME OVER

About

Tags

Share

About

Tags

Share

More from jessin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jessin

More Templates Like This