Rocki Biki

Rocki Biki

Boxing in your browser, moving in real life

“Rocki Biki” is a real-time motion-based boxing game where your physical movements and voice become powerful in-game skills.

We developed a hybrid recognition system that transforms your punches, evasive moves, and voice commands into gameplay, creating an immersive interactive boxing experience right in your web browser.

For more information, please check our GitHub repository!


Project Info

  • Name: Rocki Biki
  • Genre: Motion-based Boxing Game
  • Platform: Web
  • Tech Stack: JavaScript, Next.js, Three.js, Node.js, SpringBoot, WebRTC
  • Development Period: June 2024 - July 2024

Core Features

  • Motion-Based Gameplay: Control your character with real physical movements
  • Skill System: Trigger special skills by performing specific boxing poses
  • Voice Command System: Read random phrases aloud to activate power-ups with voice similarity scoring
  • Multiplayer Battles: Challenge friends to boxing matches in real-time with WebRTC
  • Dynamic 3D Environment: Immersive boxing arena with responsive character animations

Technical Challenges

  • Implemented Mediapipe-based pose landmark extraction for accurate motion recognition
  • Built multi-threaded environment using Web Workers and SharedArrayBuffer for parallel processing
  • Achieved 8.57x FPS increase and 708x reduced latency through performance optimization
  • Enhanced motion detection accuracy with EMA filtering and linear interpolation
  • Created a custom voice similarity algorithm to evaluate player vocal commands
  • Rendered complex 3D scenes efficiently with Three.js optimization techniques