😊 Happy Flappy

A unique twist on the classic Flappy Bird game that uses facial emotion detection to control gameplay! Smile to jump higher, and watch out - sadness increases gravity!

🎮 Game Features

• Emotion-Controlled Gameplay: Your facial expressions control the bird
  • Happy/Smile: Jump power increases based on your smile intensity
  • Sadness: Gravity increases, making the bird fall faster
• Real-time Face Detection: Uses TensorFlow.js and face-api.js for instant emotion recognition
• Adjustable Difficulty: Control pipe speed from 10-30 for varying difficulty levels
• Visual Feedback: Live emotion meters show your current happiness and sadness levels
• Webcam Integration: Your webcam feed becomes the game background

🚀 How to Play

1. Allow camera access when prompted
2. Smile to charge your jump power (shown on the Jump Power meter)
3. Click or tap to make the bird jump - jump height is based on your smile!
4. Avoid pipes and try to set a high score
5. Don't be sad - sadness increases gravity and makes the game harder!

🛠️ Technologies Used

• React 19 - Frontend framework
• face-api.js - Face detection and emotion recognition
• TensorFlow.js - Machine learning models
• HTML5 Canvas - Game rendering
• Webcam API - Real-time video capture

📦 Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Webcam/camera access

Setup

1. Clone the repository:

git clone https://github.com/nhannpl/Happy-Flappy.git
cd Happy-Flappy

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 in your browser

🏗️ Build for Production

npm run build

The optimized production build will be in the build/ folder.

🌐 Deploy to GitHub Pages

npm run deploy

📁 Project Structure

Happy-Flappy/
├── public/
│   └── models/          # TensorFlow.js face detection models
├── src/
│   ├── components/
│   │   ├── Bird.js           # Bird component
│   │   ├── Pipes.js          # Pipe obstacles
│   │   ├── EmotionMeters.js  # Visual feedback for emotions
│   │   └── GameOverlay.js    # Start/Game Over screen
│   ├── hooks/
│   │   ├── useFaceDetection.js  # Face detection logic
│   │   └── useGameLoop.js       # Game physics and collision
│   ├── App.js           # Main game component
│   └── constants.json   # Game configuration
└── package.json

🎯 Game Mechanics

• Jump Power: Based on happiness/smile detection (0-100%)
• Gravity: Increases with sadness detection
• Collision Detection: Accurate hitboxes for pipes and screen boundaries
• Score System: Points awarded for successfully passing pipes
• Screen Shake: Visual feedback on collisions

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

This project is MIT licensed.

👤 Author

Nhan

• GitHub: @nhannpl

🙏 Acknowledgments

• Inspired by the classic Flappy Bird game
• Built with face-api.js by Vincent Mühler
• TensorFlow.js models for emotion detection

---

Note: This game requires camera access to function. Your webcam feed is processed locally in your browser and is never uploaded or stored anywhere.