What Inspired Us
We wanted to take a simple, nostalgic card game and completely break it, in the fun Hack&Roll way. Inspired by chaotic party games, webcam-based social experiences, and local Singlish humour, we asked: what if your own face and hands could lose you the game? That idea sparked a project focused on laughter, chaos, and overengineering for joy.
What We Learned
We learned how to integrate and coordinate multiple real-time systems at once using gesture detection with MediaPipe, peer-to-peer video using WebRTC, and multiplayer state syncing with Socket.IO. Beyond the tech, we learned how small design choices (sound effects, screen shake, taunts) dramatically change how fun a game feels.
How We Built the Project
The game was built with Vue 3 and Vite for fast iteration, Socket.IO for real-time multiplayer gameplay, and WebRTC for live video between players. MediaPipe Vision Tasks powered face and hand gesture detection, enabling the banned-moves mechanic. Chaos elements, pixel art visuals, Singlish text-to-speech, and sound effects were layered on top to create a playful, underwater-themed experience.
Challenges We Faced
Real-time gesture detection was noisy and required careful tuning to avoid false positives. Syncing gameplay state, video streams, and chaos events without overwhelming the browser was tricky. On top of that, balancing “fun chaos” without making the game unplayable pushed us to constantly iterate under tight hackathon time constraints.
Built With
- javascript
- mediapipe
- socket.io
- vite:
- vue
- webrtc:
Log in or sign up for Devpost to join the conversation.