Boxing Games: How I Turned Shadow Boxing Into Monster Punch

I wanted to make shadow boxing feel like a game. Not a workout video playing in the background. Not a button-mashing boxing game where the person on screen does all the moving. I wanted to throw a real punch and see something react.

That idea became Monster Punch, one of the boxing games on SlayFit. It runs in a browser, watches movement through a webcam and turns each punch into a hit on a flying monster. The simple version of the idea took one sentence. Making it feel fair took much longer.

Why I built a boxing game for the browser

I like browser games because the first decision is easy. Open a link and play. There is no app-store page, download or controller setup between curiosity and the game.

That mattered even more here. A boxing game online should let someone try the idea before asking them to commit to anything. Monster Punch only needs a webcam and enough room to keep your upper body in frame. If a camera is not available, demo mode shows how the round works with simulated input.

The webcam does not see a punch

The first hard lesson was that a webcam does not see a punch. The pose model gives me points for the shoulders, elbows and wrists. It is then my job to decide what those points mean.

A wrist moving across the screen might be a punch. It might also be someone adjusting their hair or stepping back into frame. I detect a punch when the wrist extends far enough from the shoulder and moves quickly enough. Each arm has its own short cooldown, so one movement does not become several hits.

This was the difference between a technical demo and a game. Loose detection made the score feel random. Detection that was too strict made clean punches disappear. I had to tune the threshold until deliberate movement was rewarded without making the player fight the camera.

Detecting movement was only half the problem

My first instinct was to award a hit whenever the system detected a punch. That felt wrong immediately. You could punch empty space and still damage a monster.

The game now keeps each detected fist active for a very short strike window. During that window, the fist has to overlap the monster on screen. The monster is not just waiting for a punch event. The punch has to land where the target actually is.

That small spatial check changed the whole feel. Players started aiming. A monster arriving high on the right needed a different punch from one drifting past the left shoulder. It became a real punching game, not a counter attached to random arm movement.

Blocking needed its own clear gesture

I wanted defence to be as readable as attack. Raising both wrists above the shoulders creates a shield. Holding the pose for a brief moment activates it, and lowering the arms ends it.

The gesture works because it is simple enough to recognize and different enough from a punch to avoid confusion. It also gives the round a useful rhythm. Punching all the time is not always the right answer. Sometimes both arms need to come up.

How I made every connected punch matter

Every punch that connects grows the combo and adds points. The combo stays alive for a short window, then resets if the next hit takes too long. Stronger monsters need several clean connections, so accuracy matters across a sequence instead of only on the final hit.

The game also gets busier as the round continues. Monsters spawn faster and move more quickly. That creates a natural curve inside a short session. The opening gives the player time to understand the controls. The finish asks for faster decisions and cleaner movement.

You can choose a one, two, three or five minute round. I wanted Monster Punch to work as a quick break as well as a longer shadow boxing workout. The score, best combo and estimated activity give each attempt a clear result, while the leaderboard gives competitive players something to chase.

What building Monster Punch taught me

• Immediate feedback matters: the effect has to appear where the fist lands, at the moment it lands.
• Framing is part of the controls: shoulders, elbows and wrists need to stay visible for reliable tracking.
• Simple gestures win: fast extension means punch, both arms up means block.
• Accuracy feels better than generosity: a missed target should stay a miss.
• Short rounds invite another try: a clear score makes replaying feel purposeful.

The biggest lesson was that motion tracking disappears when it works well. The player should not be thinking about wrist coordinates or collision windows. They should see a monster, throw a punch and feel that the game understood them.

For a closer look at the thinking inside the round, read my research-backed article on reaction time, visual attention and hand-eye coordination in Monster Punch.

Try the boxing game online

Play Monster Punch in your browser. Pick a round length, stand where your upper body fits inside the camera and start with a few controlled punches. Keep both arms up when you need the shield.

Free to play · No download · Webcam or demo mode · One to five minute rounds.

Explore more SlayFit webcam games or read how I built Relic Hunter with Three.js and AI images.