## Inspiration
Sharpener Fights was inspired by the pen-fighting games many students played on classroom desks. We wanted to recreate that nostalgic experience as a polished browser game while giving it a new identity.
Instead of pens, players control small, asymmetric pencil sharpeners. Unlike billiard balls, sharpeners can spin, tilt, collide off-center, hang over the edge of the desk, and physically fall to the classroom floor.
## What it does
Players choose a colorful 3D sharpener and fight on an open school desk.
The controls borrow the familiar language of pool games:
- Grab your sharpener.
- Pull backward to aim and build power.
- Release to launch it in the opposite direction.
- Use off-center hits to generate spin and torque.
- Knock the opposing sharpener off the desk to win.
There are no invisible walls around the arena. A sharpener that crosses the edge continues falling under gravity and is eliminated only after passing the death plane.
Sharpener Fights includes:
- Local same-device matches
- Private friend matches through shareable invitation links
- Instant online matchmaking
- Authoritative multiplayer physics
- Best-of-five scoring
- A 15-second turn timer
- Six fair cosmetic colors
- Preset multiplayer emotes
- Mouse, touchscreen, pen, and keyboard support
- Responsive portrait and landscape layouts
- Collision, attack, falling, victory, and classroom ambience audio
- A graceful classroom fallback for devices without WebGL
## How we built it
The frontend is built with Next.js, React, TypeScript, Three.js, and React Three Fiber.
Physics and match rules live in a shared, headless Rapier simulation. The simulation runs at a fixed 120 Hz so gameplay remains consistent regardless of the player's rendering frame rate. Continuous collision detection prevents fast sharpeners from tunnelling through each other.
Local matches run the simulation inside a Web Worker. Online matches use a Colyseus WebSocket server running the same physics core as the authoritative game authority. Clients predict their own shots for immediate feedback and then reconcile with sequenced 20 Hz server snapshots.
Clerk provides player authentication. Zod validates commands and network messages across trust boundaries.
The classroom, desk, sharpeners, tiled floor, blackboard, school furniture, bags, bottles, and other environmental details are rendered procedurally. The central fight desk remains visually clear so additional detail never interferes with aiming or gameplay.
## Challenges we faced
The biggest challenge was making physics feel exciting without making maximum-power shots uncontrollable. We tuned mass, friction, damping, restitution, impulse strength, and the power curve while preserving enough angular movement for trick shots.
We also had to ensure that rendering and physics never became two competing sources of truth. Rapier owns all simulation state, while Three.js only renders validated snapshots.
Multiplayer introduced additional challenges: prediction, authoritative correction, stale-frame rejection, reconnecting the correct authenticated player, server overload protection, and ensuring both players see themselves at the bottom of the desk without changing the underlying physics coordinates.
Another challenge was creating a rich classroom that still performs well on ordinary devices. Decorative objects are quality-aware, excluded from gameplay raycasts, and reduced before important gameplay rendering is affected.
## What we learned
We learned that a satisfying physics game depends more on input feel, readable motion, and trustworthy collisions than visual complexity alone.
We also learned how valuable a shared headless simulation can be. The same physics and rules now power local play, online authority, and client prediction without maintaining separate gameplay implementations.
Finally, building for the browser taught us to treat performance, audio autoplay restrictions, touch controls, authentication, reconnects, and WebGL failure as core product concerns rather than afterthoughts.
## What's next
Next, we want to add computer opponents, player profiles, progression, unlockable cosmetic sharpener designs, ranked matchmaking, match history, tournaments, and more classroom arenas.
Our goal is to turn a nostalgic school-desk pastime into a competitive and instantly accessible browser game.
Built With
- api
- audio
- clerk
- colyseus
- express.js
- fiber
- howler.js
- next.js
- node.js
- rapier
- react
- three
- three.js
- typescript
- vitest
- web
- webassembly
- webgl
- websockets
- zod
- zustand
Log in or sign up for Devpost to join the conversation.