🎮 React + TypeScript से अपना Flappy Bird Game कैसे बनाएं (Full Guide + GitHub + Deployment)
अगर आप एक advanced, smooth और professional Flappy Bird Game बनाना चाहते हैं जो React, TypeScript, Tailwind CSS और Web Audio API से बनाया गया हो — तो यह ब्लॉग आपके लिए perfect है।
⭐ GitHub Fork कैसे करें (Easy Step-by-Step Guide)
अगर आप Flappy Bird Game को अपना version बनाना चाहते हैं, तो सबसे आसान तरीका है GitHub पर Fork करना। Fork करने से पूरा project आपके GitHub अकाउंट में कॉपी हो जाता है और आप अपने हिसाब से उसे edit कर सकते हैं।
Step 1 — Repository Open करें सबसे पहले project की GitHub link खोलें: https://github.com/Keshav465/flappybird Step 2 — “Fork” Button क्लिक करें GitHub page के top-right में आपको Fork button दिखेगा। उस पर क्लिक करें। Step 3 — अपना GitHub अकाउंट चुनें GitHub पूछेगा कि fork किस account में बनाना है — अपना account select करें। Step 4 — Create Fork क्लिक करें 2–3 सेकंड में पूरा project आपके GitHub में कॉपी हो जाएगा! Step 5 — अपना Code Edit करें या Deploy करें - VS Code में clone करके coding कर सकते हैं git clone https://github.com/YOUR_USERNAME/flappybird - GitHub Web Editor (.) से online edit कर सकते हैं - Vercel पर आसानी से Deploy कर सकते हैं
👇 Direct links:
👉 Open Flappy Bird GitHub Repo 🍴 Fork Now & Create Your Version⭐ Step 1 — Vite + React + TypeScript Project Setup
npm create vite@latest flappybird -- --template react-ts
cd flappybird
npm install
npm run dev
⭐ Step 2 — Project Structure
src/
components/
Bird.tsx
Pipes.tsx
engine/
GameEngine.ts
constants.ts
App.tsx
⭐ Step 3 — 60FPS Game Physics Engine
ये गेम पूरी तरह 60FPS पर चलता है क्योंकि यह requestAnimationFrame loop का उपयोग करता है।
useEffect(() => {
let lastTime = performance.now();
const loop = (now) => {
const delta = now - lastTime;
lastTime = now;
velocityRef.current += GRAVITY;
birdYRef.current += velocityRef.current;
pipesRef.current = pipesRef.current.map(p => ({
...p,
x: p.x - PIPE_SPEED,
}));
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}, []);
⭐ Step 4 — Bird Gravity + Rotation Logic
// Gravity
velocityRef.current += GRAVITY;
// Bird falling
birdYRef.current += velocityRef.current;
// Bird angle
rotationRef.current = Math.min(velocityRef.current * 3, 90);
⭐ Step 5 — Pure SVG Bird (No Images)
⭐ Step 6 — Web Audio API Sound Effects (No MP3)
Jump, Score, Death — सारे sound real-time generate होते हैं।
const playSfx = (type) => {
const ctx = new AudioContext();
const osc = ctx.createOscillator();
if (type === "jump") osc.frequency.value = 400;
if (type === "score") osc.frequency.value = 700;
if (type === "die") osc.frequency.value = 120;
osc.type = "square";
osc.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.15);
};
⭐ Step 7 — Game State Management
enum GameStatus {
START,
PLAYING,
GAME_OVER
}
⭐ Step 8 — GitHub पर Code Upload करें
git init
git add .
git commit -m "Flappy Bird Game"
git branch -M main
git remote add origin https://github.com/Keshav465/flappybird
git push -u origin main
⭐ Step 9 — Vercel Deploy (सबसे आसान तरीका)
✔ 1. Vercel पर Login करें
✔ 2. Add New Project → GitHub Repo Select करें
✔ 3. Vercel Auto Detect करेगा:
Framework: Vite
Build Command: npm run build
Output Folder: dist
✔ 4. Deploy क्लिक करें
🎉 अब आपका Flappy Bird Game LIVE है!