BattleFit

BattleFit is a retro, Pokémon-style browser game that makes exercise fun. Kids use their webcam to do moves like squats and jumping jacks to trigger in-game attacks.

Comment

Inspiration

We wanted to create a game that would get kids excited about moving their bodies and keep them physically fit. Inspired by Pokémon-style battles and retro arcade aesthetics, we came up with BattleFit: a browser game where exercise powers in-game combat. We saw it as a way to promote health and activity through fun, screen-based engagement.

What it does

BattleFit uses a webcam and pose detection to recognize movements like squats and jumping jacks. Players perform these exercises to charge up attacks and defeat enemies in a turn-based, Pokémon-style game. Voice commands allow for hands-free menu navigation, and the retro UI creates a fun, arcade-like atmosphere. Encouraging feedback is also used so the player enjoys playing the game and keeps improving over time.

How we built it

  • Frontend: HTML, CSS, and vanilla JavaScript
  • Pose detection: Google Teachable Machine for recognizing exercise movements via webcam
  • Voice commands: Web Speech API for simple offline-friendly voice control
  • Design: Retro game-inspired UI using custom CSS gradients, fonts, and animation
  • Offline feedback: Randomized encouragement messages keep players motivated without external APIs
  • Deployment: Runs entirely in-browser (for now!)

Challenges we ran into

  • Getting pose detection to work consistently across different lighting conditions and devices
  • Ensuring the voice controls were responsive without interfering with gameplay
  • Designing a UI that felt intuitive for kids, while still looking fun and polished
  • Balancing the game's scope within the time constraints of a hackathon

Accomplishments that we're proud of

  • Built a complete, playable prototype in under 36 hours
  • Created a system that responds to real exercise in real-time
  • Designed a fully voice-navigable menu system that works across most browsers
  • Developed an experience that's fun, functional, and promotes healthy habits

What we learned

  • How to integrate Teachable Machine pose models into JavaScript projects
  • How to design with accessibility and kid-friendliness in mind
  • The importance of fallback systems when working with APIs or advanced features
  • That combining health and gaming requires both creativity and user empathy

What's next for BattleFit

  • Add new monsters, attack types, and difficulty scaling
  • Include a daily activity tracker and personal progress dashboard
  • Add multiplayer support for team battles or challenges
  • Build a mobile-optimized version with optional AR camera integration

Built With

Share this project:

Updates