About Stickman Fighter

Stickman Fighter is a browser-based 2D fighting game built from scratch on HTML5 Canvas. No downloads, no plugins, no accounts — open a tab and you're in the arena. This page explains what the project is, why it exists, how it's built, and where it's heading.

The Vision

Modern fighting games have become spectacular but heavy. AAA titles ship at fifty gigabytes, gate combos behind elaborate season passes, and expect their players to install bespoke launchers and chat clients before the first round. There's no quick way in. Even classic 2D fighters available on storefronts often require ten minutes of downloads, updates, and account setup before you can throw a single punch.

Stickman Fighter exists to take the opposite swing. The goal is a focused, mechanically deep fighter that loads in under three seconds, runs at sixty frames per second on a five-year-old laptop, and respects the player's time. Everything you need to play — characters, stages, music, sound effects — fits in well under a megabyte of code and zero downloaded assets. The 8-bit soundtrack is synthesized live in the browser. The sprites are drawn in real time on a 2D canvas, not loaded from image files. The result is a complete fighting game inside a single web page.

Design Philosophy

Three principles shape every system in the game.

1. Mechanics first, presentation second. The combat system is built around a 4-button command grammar inspired by classic Tekken — punches and kicks on the home row, directional inputs adding context, sequential and simultaneous chords unlocking specials. Every move is data in a registry, so adding a new technique is a single entry rather than a new class hierarchy.
2. Teachable in the first stage. Stage 1 has a single normal enemy. By the time you reach the first boss at stage 5, you should know how to launch, juggle, guard-break, and throw — not because a tutorial said so, but because the difficulty curve forced you to discover each tool. The enemy AI shifts roles per archetype (Normal, Fast, Heavy, Aggressive) to teach matchup-specific reads.
3. Boss fights as exams. Each boss has three escalating AI phases tied to HP thresholds (100%, 66%, 33%). Phase transitions add new signature moves, raise reaction speed, and reduce throw vulnerability. You aren't just memorizing patterns; you're stress-testing the muscle memory you built in the stages leading up to the fight.

How It's Built

Stickman Fighter is a single-page React application written in TypeScript and bundled with Vite. The entire game loop runs inside one canvas element via requestAnimationFrame, with the React tree handling only the surrounding site chrome (header, footer, content pages).

The combat engine is data-driven from the ground up. Moves, enemy archetypes, boss phases, stage compositions, and weapon movesets are all defined as plain objects in dedicated modules. The renderer interpolates between pose keyframes per move so animation scales with frame data rather than hand-drawn sprite sheets.

Sound and music are entirely synthesized at runtime through the Web Audio API. The BGM engine is a custom 4-channel sequencer (melody, bass, arpeggio, percussion) with look-ahead scheduling and per-stage themes. The thirty-five sound effects — every hit, block, jump, dash, Ki blast, and finishing blow — are tone-shaped envelopes generated on the fly rather than sampled audio files.

The site you're reading right now is statically pre-rendered at build time using a small Vite SSR pipeline. That's why each page loads with text already in the HTML instead of a blank container that requires JavaScript to populate. The game itself loads as a separate route (/play) using React lazy import, so the marketing pages stay light.

What's in the Game Today

• Four playable fighters with distinct HP, speed, size, and Ki regeneration profiles.
• Over forty unarmed moves plus weapon-specific movesets for sword, staff, and nunchaku.
• Six Ki special moves — Ki Blast, Power Blast, Energy Dash, Ki Burst, Super Beam, Dragon Fist — gated by a meter you charge during combat.
• Fourteen hand-crafted stages culminating in seven unique bosses, plus procedural infinite mode after stage 15.
• Eight background themes with weather particles, three boss-specific BGM tracks, hit-effect VFX, and a finishing-blow slow-motion finisher.
• Combo multiplier scoring (1.0× → 3.0×), per-stage clear bonus, and a top-five local high score table.
• Full mobile support: touch overlay (D-pad + 6 action buttons + jump/dash), responsive canvas scaling, and a fullscreen toggle.

What's Coming Next

The project is under active development. The next planned features are:

• A settings menu with difficulty selection, volume mixers, and key remapping.
• Training mode — endless dummy enemy with a combo counter and on-screen move-list overlay.
• Local 2-player versus with split keyboard controls and best-of-3 rounds.
• Character customization: unlockable color palettes and alternative skins.
• Stage select for replaying cleared stages with per-stage best score tracking.
• Persistent save data (unlocks, total stages cleared, longest combo) in browser local storage.

Patch notes for shipped changes live on the Updates page.

The Tech Stack

• Runtime: React 19 + TypeScript, bundled with Vite 7.
• Rendering: HTML5 Canvas 2D context, software-rasterized at 800×400 native resolution with CSS upscale for larger displays. Pixel-art rendering preserved via image-rendering: pixelated.
• Audio: Web Audio API. Both SFX and BGM are synthesized in-engine — no external audio files.
• Routing: React Router 7 with static pre-rendering for content pages (server-side rendered to HTML at build time, hydrated on the client).
• Hosting: Vercel, deployed from the main branch on every push.
• Persistence: Browser localStorage — used for high scores today, with a save-system planned for unlocks and progression.

Project Status & Contact

Stickman Fighter is a personal project, developed as a love letter to the era of arcade fighters that taught a generation of players what "fundamentals" meant. The game is free to play, will remain free, and runs entirely client-side — there are no server costs, no telemetry pipeline, and no microtransactions to architect around.

Bug reports, feature ideas, and balance feedback are all welcome via the Contact page. If a move feels broken or a boss feels unfair, we want to know — it's a small project and direct feedback shapes the next patch more than anywhere else.

Thanks for stopping by. Now go press ▶ Play and break Iron Fist's guard.