Mind Soccer

Inspiration

Our team had two possible ideas in mind for Quack Hacks 2026. We considered ideas in the Accessibility track, as we were eager to try to create a tool with face scanning technology, as well as in Gaming, fueled by our love for friendly multiplayer competition. After brainstorming, we were able to combine these two ideas into one with Mind Soccer.

What it does

Mind Soccer is a 2D multiplayer web game that uses camera access and face tracking. You must tilt and move your head in the direction that you want your player to move across the arena in. Collide into the ball and knock it into your opponent's goal to score. Making quick, but calculated head movements to maneuver your player at precise angles, while trying to keep an eye on the ball, poses a unique and entertaining challenge for all players.

How we built it

The heart of Mind Soccer relies on p5.js, a JavaScript library that supports creative coding capabilities using an interactive canvas. A setup() function initializes an environment, while draw() runs continuously in a loop to create animations, and interactive functionality each frame. Our game also makes unique use of ml5.js, a user-friendly machine learning library for the web that provides access to models and algorithms in the browser, building on top of TensorFlow.js with no other external dependencies. The Face Mesh model that we used provides hundreds of 3D facial landmarks describing the geometry of the face, enabling endless creativity potential. Players are connected to game rooms using Socket.io, and are able to play across browsers using ngrok, a cloud network platform. Finally, a simple Express server paired with core React + Vite functionality makes this project easily extendable in the future

Challenges we ran into

Our biggest challenge was finding a way to host the game for multiple machines, since proper game flow depends on independent camera input. Ngrok proved to be a simple but handy solution after much trial and error with IP and complex network routing. Some other challenges we faced included the tuning of object physics, for example finding comfortable accelerations, player deadzones, and collision detection functionality to make UX achievable yet novel.

Accomplishments that we're proud of

Our team is proud to have took time to consider and explore multiple ideas before settling on just one to tackle. We're very happy to have each worked with technologies previously unfamiliar to us, and combine often unrelated fields-JavaScript and Machine Learning-into a single fun and accessible application, all within 24 hours. We ended up with a game that is genuinely fun to play, and easy to build off of in the future, making up for the hours of sleep lost.

What we learned

In addition to the opportunity to enhance our technical skills in system design and Git version control, we explored new use cases for the p5 and ml5 libraries. Some of us were also introduced to innovative ways of integrating AI tools into the development process. We also learned about how more complex projects are ideally structured, as well as better ways to split of responsibility through the use of modularity and communication.

What's next for Mind Soccer

If hosted with a professional server, players could queue up for random matchmaking and Mind Soccer could host many games at once without latency issues. Users could sign into accounts which track statistics, friends, and their rank in a leaderboard. We also see a lot of creative potential in the introduction of arcade modes that feature selecting player roles/abilities, on-field obstacles or collectible power-ups, and single-player levels vs. increasingly difficult AI opponents.