A modern Flappy Bird clone built with React, TypeScript, and HTML5 Canvas. Navigate through pipes by tapping or pressing space, compete with yourself, and beat your best score!
- Canvas-Based Rendering: Smooth 60fps gameplay using HTML5 Canvas with custom-drawn bird, pipes, and environment
- Frame-Rate Independent Physics: Delta-time based game loop ensures consistent gameplay on 60Hz, 144Hz, or any refresh rate
- Zustand State Management: Lightweight and performant centralized game state with zero boilerplate
- Score Persistence: Best score automatically saved and loaded from localStorage
- Retro Pixel Art Style: Custom canvas-drawn bird with animated wing flaps, gradient pipes, and scrolling ground
- Touch & Keyboard Support: Play with Space, ArrowUp, Enter, click, or tap — works on desktop and mobile
- Responsive Design: Fullscreen centered layout that adapts to any screen size
- Accessible UI: ARIA labels, keyboard navigation, and semantic HTML for screen readers
- React 19: UI components, overlays, and game lifecycle management
- TypeScript 5: Full type safety across game state, physics, and rendering
- Vite 6: Lightning-fast dev server and optimized production builds
- Zustand 5: Minimal state management for game state (bird, pipes, score)
- React Router 7: Client-side routing with catch-all redirect
- Tailwind CSS 3: Utility-first styling for UI overlays and animations
- HTML5 Canvas: Core game rendering engine with gradient effects and sprite drawing
- Clone the repository:
git clone https://github.com/Serkanbyx/flappy-bird.git
cd flappy-bird- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run build
npm run preview- Open the game in your browser
- Press Space, ArrowUp, Enter, or click/tap anywhere to start the game
- Press Space, ArrowUp, or click/tap to make the bird flap its wings
- Navigate through the gaps between pipes without hitting them or the ground
- Each pipe pair passed earns 1 point
- When game is over, press Space, Enter, or click/tap to restart
- Your best score is automatically saved and displayed on the start screen
The game uses requestAnimationFrame for a smooth game loop. A custom useGameLoop hook manages the animation cycle and provides delta-time values for frame-rate independent updates:
const dt = Math.min(deltaTime, 33.33) / TARGET_FRAME_MS;This normalization ensures all physics constants (tuned for 60fps) work consistently on any monitor — from 60Hz to 144Hz and beyond.
The bird is affected by gravity each frame. Flapping applies an upward velocity, and the bird rotates smoothly based on its current velocity:
const BIRD = {
gravity: 0.45,
flapPower: -7.5,
maxVelocity: 10,
maxUpRotation: -25,
maxDownRotation: 70,
};Rotation uses linear interpolation (lerp) for smooth transitions between upward and downward angles.
AABB (Axis-Aligned Bounding Box) collision detection checks the bird against:
- Top boundary (ceiling)
- Bottom boundary (ground)
- Pipe pairs (both top and bottom segments)
All game visuals are drawn procedurally on an HTML5 Canvas (400×600px):
- Sky: Linear gradient from light blue to sky blue
- Pipes: Multi-stop gradients with cap overhangs and border strokes
- Bird: Ellipse body, animated wing, eye with pupil, and triangular beak
- Ground: Gradient fill with scrolling dash pattern
- Score: Retro pixel font with shadow effect
Modify src/constants/game.ts to adjust the bird's behavior:
export const BIRD = {
gravity: 0.45, // Increase for faster falling
flapPower: -7.5, // More negative = stronger flap
maxVelocity: 10, // Maximum falling speed
};Adjust pipe gap, speed, and spacing for different difficulty levels:
export const PIPE = {
gap: 150, // Vertical gap between pipes (smaller = harder)
speed: 2.5, // Horizontal scroll speed (higher = harder)
spacing: 220, // Distance between pipe pairs
};All game colors are centralized in the COLORS constant:
export const COLORS = {
skyTop: "#4dc9f6",
skyBottom: "#87ceeb",
birdBody: "#f7dc6f",
pipeBody: "#73bf2e",
// ... more colors
};- ✅ Canvas-based 60fps game rendering
- ✅ Frame-rate independent physics (deltaTime)
- ✅ Gravity, flap mechanics, and smooth rotation
- ✅ Procedural pipe generation with random heights
- ✅ AABB collision detection (pipes, ground, ceiling)
- ✅ Score tracking with localStorage persistence
- ✅ Start screen with floating bird animation
- ✅ Game over screen with score panel and "NEW!" badge
- ✅ Keyboard support (Space, ArrowUp, Enter)
- ✅ Touch and click support for mobile
- ✅ Responsive fullscreen layout
- ✅ Accessible UI with ARIA labels
- ✅ Netlify deployment ready
- Sound effects (flap, score, crash)
- Difficulty progression (increasing speed over time)
- Multiple bird skins / themes
- Global leaderboard
- Night mode / day-night cycle
- Fork the repository
- Create your feature branch (
git checkout -b feat/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feat/amazing-feature) - Open a Pull Request
feat:— New featurefix:— Bug fixrefactor:— Code refactoringdocs:— Documentation changeschore:— Maintenance tasks
This project is licensed under the MIT License. See the LICENSE file for details.
Serkan Bayraktar
- Website: serkanbayraktar.com
- GitHub: @Serkanbyx
- Email: serkanbyx1@gmail.com
- Inspired by the original Flappy Bird game by Dong Nguyen
- Built with React, Vite, and Zustand
- Styled with Tailwind CSS
- Deployed on Netlify
- Open an Issue for bug reports or feature requests
- Email: serkanbyx1@gmail.com
- Website: serkanbayraktar.com
⭐ If you like this project, don't forget to give it a star!