/mouthy-bird

Flappy Bird that uses your mouth as a controller

Primary LanguageJavaScript

Mouthy Bird

Play Mouthy Bird! (laptop/desktop only)

Mouthy Bird Gameplay

Mouthy Bird is a game where the player opens and closes their mouth to control the altitude of their "bird" and make it through an ever faster approaching series of walls. Based on the classic game Flappy Bird by Dong Nguyen.

The game provides audio tones in each ear for maximum synaesthetic navigation. The left ear tone corresponds to the height of the bird while the right ear tone corresponds to the height of the next hole. This allows players to play with their eyes closed by matching the two tones.

Mouthy Bird was coded in under a day with the assistance of ChatGPT 4o. To learn more about how to use AI to write code visit: WORMHOLE

How It Works

  • Face Detection: The game uses face-api.js to detect and analyze facial features. The mouth's openness controls the bird's vertical position, and an eyebrow shrug can trigger a game restart.
  • Audio: Background audio and sound effects are generated and controlled using Tone.js. The pitch changes based on the bird's position and the proximity of obstacles, providing additional sensory cues.

Installation

To run the game locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/presstube/mouthy-bird.git
    cd mouthy-bird
    
  2. Install dependencies:

    npm install
    
  3. Start the development server:

    npm run dev
    

Controls

  • Mouth: Open and close your mouth to control the height of the bird.
  • Eyebrow Shrug: Restart the game once you're dead.
  • C Key: Toggle the dat.GUI panel for adjusting game settings.

Customization

dat.GUI

The game features a built-in settings panel using dat.GUI for easy customization. You can adjust various parameters, including:

  • Detection Interval: The frequency of face detection updates.
  • Thresholds: Customize the sensitivity of mouth and eyebrow detection.
  • Audio: Adjust the pitch range and other audio settings.

To customize settings, press the 'C' key to toggle the settings panel.

Face-API Model

The game uses a pre-trained model for face detection, located in the public/models directory. You can replace these models with custom models if needed.

Acknowledgments

  • Face Detection: Powered by face-api.js.
  • Audio Synthesis: Managed with Tone.js.
  • Graphics and Interaction: Implemented using the HTML5 Canvas API.

Live Demo

Try the live demo here.