Inspiration
Many teenagers do not get enough daily exercise, especially when most of their free time is spent on phones, games, and social media. We wanted to turn the appeal of games into a reason to move, rather than asking users to put their devices away completely. Inspired by the energy and competitiveness of friendly sports challenges, we created Punch Off: a gamified exercise experience that makes physical activity feel social, exciting, and rewarding.
What it does
Punch Off is a web-based punching competition that connects one laptop with two phones. Each player uses their phone as a motion controller and competes to deliver the strongest punch, with the laptop displaying the live game, scores, and results. Players can also use the app alone in practice mode to test their power, improve their technique, and challenge their personal best. Try it on andescendants.onrender.com
How we built it
We built Punch Off with HTML, CSS, and JavaScript for the web interface, and Node.js for the local server. The laptop runs a Node.js HTTPS server that creates a self-signed TLS certificate, hosts the game pages, and provides a secure WebSocket connection over the local Wi-Fi network. We implemented a lightweight WebSocket server using Node’s built-in networking and cryptography modules, allowing two phones to send live JSON sensor packets to the laptop at a target rate of 60 Hz. On each phone, JavaScript uses accelerometer APIs, including iOS motion-permission handling, to capture acceleration on the x, y, and z axes. The server filters and fuses the raw motion readings to reduce gravity and sensor noise, applies shake detection to prevent accidental scoring, then calculates the acceleration magnitude used to estimate punch force based on F = ma. Finally, the game interface renders each player’s results in real time, while the connection layer automatically reconnects if a phone temporarily loses its network connection. Special thanks to Codex by OpenAI for making this possible.
Challenges we ran into
One of our biggest challenges was turning raw sensor data into meaningful actions that work in real-world conditions. Phone sensors can be noisy, different devices may report movement differently, and normal hand movement can accidentally look like a punch. We also encountered connection issues because the devices need to communicate over the same local network, and some Wi-Fi networks restrict or block the connections needed by the app. Solving these issues required us to think carefully about calibration, motion thresholds, and more reliable ways for players to connect.
Accomplishments that we’re proud of
We are proud that we successfully transformed phone motion data into a fun, responsive game mechanic. Rather than creating a standard web game controlled by a keyboard or mouse, we used real-world physical movement as the main form of interaction. We also created a multiplayer experience that brings people together around exercise, while still offering a solo practice mode for individual users. Most importantly, we built a project that shows exercise can be engaging when it is combined with competition, feedback, and play.
What we learned
Through this project, we learned how web applications can interact with phone hardware such as accelerometers and motion sensors. We gained experience using real-time WebSocket communication, processing sensor data, and converting physical movement into game input. We also learned that building for real devices requires testing under many different conditions, including different phones and network setups. This project helped us understand that a good idea needs both strong technical implementation and a user experience that motivates people to keep coming back.
What’s next for Punch Off
Next, we want to make Punch Off more accurate, accessible, and enjoyable for a wider range of players. We plan to improve the motion-detection algorithm so it can better distinguish a real punch from accidental movement, and add calibration for different devices and player styles. We would also like to introduce player profiles, leaderboards, achievements, exercise streaks, and additional game modes such as training challenges or team battles. In the future, we hope to make connection setup easier and explore using online multiplayer so friends can compete even when they are not on the same Wi-Fi network.
Built With
- css
- github
- html
- javascript
- json
- node.js
- react
- render
- tcp
- typescript
- vite
- websocket


Log in or sign up for Devpost to join the conversation.