The idea
We wanted to capture the martial arts duels kids sketch in the margins of school notebooks during boring lectures. Two stick figures, drawn in ballpoint ink, clashing swords across ruled blue paper.
Instead of heavy sprite sheets or canned video clips, we committed to zero image assets. Everything you see on screen is calculated and drawn live in code.
What we built
A 10-page progression ladder culminating in a fight against the towering Ink Titan. We engineered a full fighting system with light attacks, heavy overhead strikes, directional jumps, blocks, and frame-critical parries.
The fighters use procedural 2D joint skeletons rather than traditional frames. An authentic 12 FPS “line boiling” effect gives strokes living, hand-drawn ink jitter, while the physics loop underneath runs at 60 FPS for responsive combat timing.
The hard part
Geometric blade-to-hurtbox collision detection in pure 2D Canvas. We check line segments against joint circle colliders each tick to prevent attacks from clipping through fast swings.
Tuning the parry window required careful frame timing. Defending just before a blade lands triggers a 0.15-second hitstop that freezes both fighters in place, plays a metallic clash via the Web Audio API, and staggers the attacker for a counter-strike.
Result
An instant-loading browser fighting game weighing just 1.2 MB total. It supports full desktop keyboard combos as well as dedicated touch zones with haptic vibration on mobile devices.