StickFight: a blue and a red stickman clash swords on lined notebook paper

StickFight: Notebook Duel

Sword duels drawn in the margins of a notebook.

FightingjavascriptDesktopMobile
Size ~1.2 MBControls keyboard / touch
03 · STORY

How we made it

StickFight: Notebook Duel brings the stickman battles we doodled in school exercise book margins into a responsive martial arts fighter.

There are no image sprites or canned animation loops. The fighters are procedural 2D joint skeletons drawn directly to HTML5 Canvas. We run a 12 FPS “line boiling” effect to give strokes an authentic living jitter, while the combat physics runs at a razor-sharp 60 FPS.

Combat is tuned around timing and fundamentals. We calculate blade collisions geometrically from sword lines to hurtbox circles. Parrying right before an attack connects freezes the screen for a dramatic 0.15-second hitstop, staggering the attacker. The 10-page ladder ends with the towering Ink Titan boss. On mobile, dedicated thumb zones and haptic vibrations make two-handed sword duels feel tactile on glass.

Built with:
JavaScriptCanvas 2DWeb Audio API
03 · CONTROLS

How to play StickFight: Notebook Duel

Keyboard

  • AD
    Move (or ← →)
  • Space
    Jump (or W / ↑)
  • J
    Light attack (or Z / left click)
  • L
    Heavy attack (or X / right click)
  • Shift
    Block (or K / C)

Touch

  • LEFTRIGHT
    Move
  • JUMP
    Jump
  • ATTACK
    Light attack
  • HEAVY
    Heavy attack
  • BLOCK
    Block