Street Fighter Clone

Build a polished web clone of Street Fighter, the arcade 2D fighting game (Street Fighter II look): pick a World Warrior and win best-of-three rounds with punches, kicks, specials, combos and a super. Draw everything in code on one HTML canvas (no image or sound files) at 480 x 270, scaled up with crisp nearest-neighbour pixels and letterboxed.

It is Street Fighter on screen: its name, a "STREET FIGHTER" logo in a brush font (Bangers) with a yellow-orange-red gradient and black shadow, the subtitle "WORLD WARRIORS", and its own words: "PLAYER SELECT", "ROUND 1", "FINAL ROUND", "FIGHT!", "K.O.", "DOUBLE K.O.", "TIME OVER", "DRAW GAME", "YOU WIN", "YOU LOSE", "PERFECT", "<NAME> WINS", "CONTINUE?", "GAME OVER", "CONGRATULATIONS!", "N HITS COMBO", "SUPER". Copy the mechanics, HUD and feel, but all 8 fighters are ORIGINAL characters drawn from a 2D skeleton: Kaito (Japan, indigo karate gi, white headband), Mei (China, jade kung fu jacket, long braid), Jax (USA boxer, red tank, flat-top, gloves), Boris (Russia, huge bald bearded wrestler), Luana (Brazil, capoeira, yellow and green), El Trueno (Mexico, gold luchador mask), Somchai (Thailand, Muay Thai shorts and headband), Amara (Nigeria, taekwondo, afro puffs). No Capcom characters, sprites, move names, music or voices.

SHELL
One full-window canvas that opens on the title. Keyboard 1P: WASD move, U/I light/heavy punch, J/K light/heavy kick, O special, L super, Enter start, Esc pause; 2P: arrows + numpad 4/5, 1/2, 6, 3. Gamepads work. Touch screens get a stick and LP HP SP / LK HK SUPER buttons with START and SOUND pills (under the picture in portrait, see-through in landscape); taps also pick menu rows and portraits.

SCREENS
1. Title: a moonlit temple roof with a cheering crowd, two fighters in stance, the logo, menu ARCADE / VERSUS / TRAINING / OPTIONS, PRESS START, HI score, "© 2026 VIBECODE".
2. PLAYER SELECT: red (1P) and blue (2P/CPU) diagonal halves with moving slashes, a 4 x 2 portrait grid, red 1P and blue 2P/CPU cursors, big animated fighters on each side with name, flag, country and style, a 30 s TIME countdown and the fighter's bio. In arcade the CPU cursor spins and lands on the next opponent.
3. VS: both fighters slide in huge, a giant flashing "VS", name bars with flags, stage name and BATTLE n / 7.
4. Fight: HUD = "1P" score / HI / CPU line, long yellow health bars that drain from the outside toward a red-and-white KO badge (orange trail for recent damage, KO badge flashes when someone is low), names, star round-win marks, a big 99 timer, SUPER meters at the bottom ("SUPER MAX" flashes when full). Round flow: intro, "ROUND 1", "FIGHT!", play, "K.O." with slow motion and a white flash, win pose, "YOU WIN" / "PERFECT", then a TIME and VITAL bonus tally.
5. Win quote: winner portrait and a typed-out quote, the loser small and beaten. 6. CONTINUE? with a 9..0 countdown (buttons speed it up), GAME OVER, and a CONGRATULATIONS ending after all seven arcade opponents. 7. Options: difficulty 1-8, 1/3/5-round matches, time 99/60/30/infinite, shake + sparks LOW/NORMAL/MAX, announcer and music on/off, controls list. 8. Pause: resume, training dummy mode (stand, crouch, block, jump, CPU), character select, quit.

FIGHTING
Fixed 60 steps a second. Walk, crouch, neutral/forward/back jumps (forward jumps flip), four normals standing, crouching and in the air (jab, straight, snap kick, roundhouse, crouch uppercut, low kick, sweep that knocks down, jump-ins that must be blocked standing). Hold back to block (down-back for lows) with blockstun and chip damage on specials. Specials by motion (QCF+P wave, DP+P rising, QCB+K spin, QCB+P rush) or the one-button SP with a direction; four kinds shared by all fighters with their own names and styles: fireball, invincible rising uppercut/kick/knee that launches, rush (punch, shoulder charge, kick flurry), and a hovering spin kick or lariat. Super (QCF x2 + P or the SUPER button at full meter): the screen goes dark with speed lines, a red/blue cut-in band slides across with the fighter's face and the super's name, then a multi-hit giant fireball or rush. Normals cancel into heavier normals on contact and into specials; specials into the super. Hitstop on every hit, pushback (the attacker slides back when the defender is cornered), combo damage scaling, a "2 HITS COMBO" counter, stun that ends in dizzy stars (mash to recover), throws (forward or back + HP up close), knockdowns with invincible get-up, fireball clashes, a 6-frame input buffer. Hits come from circles on the fist or foot of the drawn skeleton against the opponent's body box, so what you see is what hits.

CPU
The CPU presses the same virtual buttons: walks in, blocks on reaction (decides once per attack), jumps fireballs, anti-airs jump-ins with its rising special, pokes, throws, jump-ins, hit-confirmed combos that cancel into specials and supers; level 1-8 sets block/react/attack rates, and it gets harder up the arcade ladder.

LOOK
Fighters: tapered limbs with dark outlines, two-tone cel shading plus a rim highlight, back limbs darker, headband tails and braids that flutter, idle bob and walk cycles, poses interpolated from a pose library. Eight stages with parallax layers, perspective floors whose seams fan out, and crowds that bob and throw their arms up on big hits: moonlit temple, golden temple at dawn, night market with lantern strings, sunset docks with a ship and crane, Lagos harbor by day, snowy steelworks with a furnace, Amazon river pier, fiesta plaza with papel picado. Hit sparks, blue block sparks, shock rings, dust, screen shake.

RULES
Sound effects, five original arcade tunes with drums synthesised in Web Audio, and an announcer using the browser's speech voice ("Round one", "Fight!", "K.O.", "You win"), with mute (M). Options, hi score and per-fighter wins in localStorage. ?demo=1&p1=kaito&p2=jax runs a CPU vs CPU attract mode from the title; ?screen=fight|training|select|vs|options|result opens a screen; ?p1, ?p2, ?stage, ?mode=versus, ?seed.

REMIX-READY
brand.ts holds the name, words, HUD colours, rules and physics; roster.ts holds every fighter (look, build, specials, stats, quotes); moves.ts the frame data; poses.ts the pose library; stages each live in small draw files; rules, combat, match flow, screens, AI, audio, input and rendering are small DOM-free (rules) or render-only files. README.md maps it all.