About Super Stick Hero

Super Stick Hero is a 2D fighting game that runs in your browser. No downloads, no plugins, no accounts — open a tab and you're in the arena. This page covers what the game is, why it exists, how it's built, and where it's heading.

The Vision

Modern fighting games are spectacular but heavy. Big-budget titles ship at fifty gigabytes, gate combos behind season passes, and expect you to install a launcher and a chat client before the first round. There's no quick way in. Even classic 2D fighters on storefronts often want ten minutes of downloads, updates, and account setup before you can throw a single punch.

Super Stick Hero swings the other way. It's a focused, deep fighter that loads in under three seconds and runs at sixty frames per second on a five-year-old laptop. Everything you need to play — characters, stages, music, sound effects — fits in well under a megabyte, with nothing downloaded. The 8-bit soundtrack is generated live in the browser, and the fighters are drawn in real time rather than loaded from image files. The result is a complete fighting game in a single web page.

Design Philosophy

Three principles shape every system in the game.

1. Mechanics first, presentation second. Combat runs on four buttons that mean something different on each fighter. Add a direction or press two together and you get specials. It's simple to pick up and has room to grow into launchers, juggles, and guard breaks.
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

Super Stick Hero is a single-page React app written in TypeScript. The whole game loop runs inside one canvas element; React handles only the site chrome around it (header, footer, content pages).

Combat is defined as data. Moves, enemy types, boss phases, stage layouts, and weapon movesets are all plain configuration. The renderer animates by interpolating between pose keyframes per move, so animation follows frame data instead of hand-drawn sprite sheets.

Sound and music are synthesized while you play. The music engine is a 4-channel sequencer — melody, bass, arpeggio, percussion — with per-stage themes. The thirty-five sound effects (every hit, block, jump, dash, Ki blast, and finishing blow) are shaped on the fly rather than played back from audio files.

The pages you're reading are pre-rendered at build time, so each one arrives with its text already in the HTML instead of a blank page waiting on JavaScript. The game loads on its own route (/play), which keeps these pages light.

What's in the Game Today

• Four playable fighters with distinct HP, speed, size, and Ki regeneration profiles.
• Four distinct fighter styles (fists, ninja blades, elemental magic, a hammer), 40+ moves, and consumable item drops.
• Six Ki special moves — Ki Blast, Power Blast, Energy Dash, Ki Burst, Super Beam, Dragon Fist — gated by a meter you charge during combat.
• Eighteen hand-crafted stages culminating in ten unique bosses, plus procedural infinite mode after stage 18.
• 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: a thumb-first touch overlay with an analog stick for movement plus grouped attack, utility, and Ki-special buttons. The canvas scales to the screen and the layout is tuned for landscape.

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. The game draws in a logical 800×400 space and scales to the display at the device's full pixel ratio, so it stays crisp at any size.
• 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

Super Stick Hero is a personal project, made as a love letter to the arcade fighters that taught a generation of players what "fundamentals" meant. It's free to play and will stay free. Everything runs in your browser, so there are no server costs, no tracking, and no microtransactions.

Bug reports, feature ideas, and balance feedback are welcome on the Contact page. If a move feels broken or a boss feels unfair, I want to know — on a project this small, direct feedback shapes the next patch more than anything else.

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