Shuttle Strike

Shuttle Strike is first-person badminton in the browser where your hand is the racket. Your webcam tracks your hand: close it as if gripping a racket handle and the racket appears in your fist, tilting with your wrist. Swing when the shuttle reaches you. High and hard is a smash, low is a clear, and soft is a drop shot. Footwork is automatic, so you only play the shots.

You face a CPU opponent in the final of the "World Championships 2026": a full arena with a scoreboard, advertising boards, crowd applause and bloom lighting. Matches are first to 11, win by 2, on Easy, Normal or Hard.

No webcam? Choose Play with mouse: the racket head follows the mouse (or your finger on a touch screen), and a fast flick is a swing.

How it's made

The whole game is one 70 KB HTML file. Three.js draws the arena and the players, and MediaPipe's hand tracker reads your webcam. Both load from a CDN, so it needs an internet connection. Your video stays in your browser.

Credits

Made by fedifianto.

Webcam controls

Gesture	What it does
✊ Close your hand	Grip the racket. It sits in your fist and tilts with your wrist.
Fast swing as the shuttle arrives	Hit it. Swing left or right to aim.
Racket high + hard swing	Smash
Racket low	Lift / clear
Soft swing	Drop shot
✋ Hold an open palm still	Pause. Close your hand to resume.
✊ Close and hold after a match	Rematch

Mouse or touch controls

• Move the mouse, or drag a finger: the racket head follows.
• Flick fast through the shuttle to swing; flick left or right to aim.
• The same rules make a smash, a clear or a drop shot.
• P pauses.

Rules

• Singles, first to 11 points, win by 2.
• You serve first: "swing through the shuttle".
• Points end when the shuttle lands, goes out, or goes into the net. The banner tells you why, and long rallies get a shot count.

Tips

• Timing beats power. You need to swing as the shuttle reaches the racket head. Starting early or late is the most common miss.
• Mix your shots. A drop shot after a few clears catches the CPU deep in its court; a smash finishes a high return.
• Don't swing big all the time. Soft swings are what make drop shots, and they land in front of the net.
• For the webcam: good, even light on your hand, a plain background and your whole hand in frame make tracking far more reliable. If the overlay says "no hand", move back a little.
• Start on Easy to learn the timing, then try Normal and Hard: the CPU moves faster, reacts sooner and makes fewer mistakes.