King of the Ring

Real-time boxing game using only your phone! We use built-in sensors to turn your device into a motion controller. Step into the arena and become the King of the Ring!

Comment

Inspiration

Not everyone has a Wii Remote, but every student has a phone. Modern phones contain powerful motion sensors, so we wanted to take advantage of the accelerometer and gyroscope sitting in everyone’s pocket to create a real-time, motion-controlled game.

We were inspired by Wii sports to create King of the Ring. We chose boxing because punches, blocks, and dodges map naturally to arm rotations and quick directional movements, making it a better fit for phone motion data compared to sports that require lateral movement. Boxing also let us classify gameplay as distinct moves, which helped reduce the impact of noisy sensor readings.

What it does

King of the Ring is a web-based, two-player boxing game where fighters use their phones as motion controllers. A player joins a match with a room code, grants motion tracking permission, and performs real boxing motions like jabs, hooks, uppercuts, blocks, and dodges.

The phone reads accelerometer, gyroscope, and orientation data, classifies each movement, and sends the move to the game server. The server relays player actions through WebSockets to the main display, where both fighters are shown in a split-screen 3D boxing ring. Players manage health, stamina, combos, blocking, dodging, and knockouts in real time.

How we built it

We built the project as a browser-based game with three main systems: the phone controller, the WebSocket server, and the 3D arena.

On the phone side, we used the browser’s DeviceMotionEvent and DeviceOrientationEvent APIs to collect acceleration, rotation rate, and orientation data from iPhones. We also built a recorder page to gather labeled motion samples for different moves, including jabs, hooks, uppercuts, blocks, dodges, and noise data.

For networking, we built a Node.js server using Express and the ws WebSocket library. The server creates four-digit room codes, lets two players join a display, validates incoming messages with Zod, rate-limits player actions, and relays moves between phones and the game display. Since iPhones require HTTPS for motion sensor permissions, we used Cloudflare Tunnel to expose our local server securely so phones could connect during testing.

For the game display, we used Three.js to render a split-screen boxing arena with animated fighters, gloves, health bars, stamina bars, combo tracking, hit reactions, crowd reactions, dazed effects, camera shake, and knockout animations.

Challenges we ran into

One of the hardest challenges was getting reliable gyroscope and accelerometer data from iPhones. Apple requires explicit motion permission, and sensor access only works properly in secure contexts, so we had to work around browser and privacy restrictions before we could even collect data.

Another major challenge was move classification. Phone sensor data is noisy, and different players perform the same move slightly differently. We initially explored using AI to label or classify the data, but it was too slow and inconsistent for real-time gameplay. Instead, we manually designed threshold-based rules using acceleration peaks, rotation rate, and phone orientation to classify moves like jabs, hooks, uppercuts, blocks, and dodges.

Balancing the game was also difficult. Early versions included healing, blocking, dodging, and attacks, but some mechanics overlapped or encouraged passive play. We added stamina to prevent players from attacking or dodging forever, and we added combos to reward aggressive, accurate play and make knockouts feel more satisfying.

Accomplishments that we're proud of

We are proud that we connected several difficult systems into one playable experience. Our project combines live phone motion detection, real-time WebSocket communication, room-code multiplayer, and a 3D animated boxing match.

We are especially proud of getting multiple devices to communicate with low latency, building a working phone-to- display control loop, and creating a game that feels physical instead of button-based. The final experience brings together motion data collection, move classification, networking, 3D rendering, stamina and combo systems, and responsive hit animations.

What we learned

We learned how to use WebSockets to maintain a continuous real-time connection between phones and the computer display. We also learned a lot about iOS motion permissions, browser security requirements, and the limitations of mobile sensor data.

On the game design side, we learned that motion-controlled games need clear rules, cooldowns, stamina, feedback, and balancing so that the game feels fair. Otherwise, many moves could just be spammed and are overpowered.

What's next for King of the Ring

We want to add an Elo ranking system and a global leaderboard so players can compete beyond a single match and track their progress over time. Currently, the application only works on iPhones, since they are more common in our testing group and provide reliable gyroscope and accelerometer data, but we hope to expand support to Android devices in the future.

As for game mechanics, we want to make matches more dynamic by adding powerups, better movement between fighters, and more strategic options beyond just attacking and blocking. For example, players could move forward and backward in the ring, pick up temporary boosts, or unlock special attacks through combos. These additions would make King of the Ring feel more like a complete competitive game while still keeping the physical, motion-controlled gameplay that makes it fun.

Share this project:

Updates