Super Mario Bros. Clone

Build a polished web clone of Super Mario Bros., the 1985 NES side-scrolling platformer: run, jump, stomp enemies, bump ? blocks, grab power-ups and slide down the flagpole across four worlds. Draw everything in code on one HTML canvas (no image or sound files) at the NES's 256 x 240 with 16 px tiles and 15 rows, scaled up with crisp nearest-neighbour pixels; wider windows see more of the level (up to 400 px wide).

It is Super Mario Bros. on screen: its name, the "SUPER MARIO BROS." title plaque and its own words ("1 PLAYER GAME", "TOP-", "WORLD 1-1", "TIME", "GAME OVER", "TIME UP", "PAUSE", "THANK YOU ...!", "YOUR QUEST IS OVER. WE PRESENT YOU A NEW QUEST."), in a bold NES-style 8 x 8 pixel font. Copy the mechanics, HUD and look, but every character is ORIGINAL, drawn as text pixel maps: the hero "ROCCO" (red bobble hat with a white cuff and pompom, white scarf, teal jacket, brown boots, no moustache), "Grumble" (an angry walking acorn), "Shellbug" (a green beetle that hides in its shell), power-ups Super Berry (a red strawberry with eyes), Spark Flower, a Star and a green 1-UP berry, and "JUNI" (a friend in a blue hood) at the end. No Nintendo sprites, music or sounds.

SHELL
One full-window canvas, opening straight on the title: no splash, login or prompt. Keyboard: arrows/WASD move, Z/Space/Up jump, X/Shift run and throw fire, Enter/P/Esc pause, M mute. Touch screens get an on-screen controller: in portrait a grey NES-style pad under the game (d-pad left/right, red B and A buttons, SOUND and START pills); in landscape see-through buttons over the picture. Tapping the title menu or a level card also works.

SCREENS
1. Title: world 1-1's ground, hills, bushes and clouds behind a brown plaque with "SUPER" and big blocky "MARIO BROS." in peach with a black drop shadow, "© 2026 VIBECODE" under it, a berry cursor on "1 PLAYER GAME" / "LEVEL SELECT", "TOP- 023300" (saved best) and a keys hint on the ground.
2. Level select ("SELECT A WORLD"): four cards in a 2 x 2 grid, each with a mini-map of the level, "WORLD 1-1 GRASSLANDS", "1-2 UNDERGROUND", "1-3 TREETOPS", "1-4 CASTLE", a spinning star once cleared and the world's TOP score; a flashing gold border on the chosen card. A starts, B goes back.
3. WORLD card: black screen, HUD on top, "WORLD 1-1" and the hero with "x 3" lives for 2.5 s.
4. Play: HUD in white across the top: hero name + 6-digit score, a flashing coin "x00", WORLD 1-1, TIME counting down from 400 (one unit per 0.4 s, hurry jingle at 100). The camera only scrolls right. Walk/run with momentum and skids, variable-height jumps (higher while held and when running). ? blocks shimmer and pop a coin (+200) or sprout a power-up; bricks bump when small and shatter into four pieces when big; a 10-coin brick; hidden star and 1-UP bricks. Stomp enemies with a rising score chain (100, 200, 400 ...); stomped Shellbugs become shells you can kick into other enemies; anything on a bumped block flips off. Super Berry grows the hero (the world freezes while he flickers between sizes), the Spark Flower turns him white and red and lets him throw bouncing fireballs, the Star makes him flash and plows through enemies to a faster tune. Getting hit when big shrinks him with a blink; when small, or in a pit or lava, he dies (the classic hop and fall), loses a life and restarts the level. 100 coins = 1UP. Score pop-ups float up from every hit.
5. Goal: grab the flagpole (100 to 5000 by height), slide down with the flag, hop off, walk into the brick castle, the leftover time counts into the score with ticks, and a flag rises on the castle; then the next WORLD card.
6. World 1-4 ends with an axe on the far side of a bridge over lava: the bridge falls away tile by tile, the hero walks to JUNI and "THANK YOU ROCCO! / YOUR QUEST IS OVER. / WE PRESENT YOU A NEW QUEST. / PUSH START TO PICK A WORLD" appears line by line.
7. GAME OVER on black when the last life goes, then back to the title.

LEVELS
1-1 Grasslands: blocks and a power-up, pipes of rising height, two pits, a high brick bridge, the star brick, three ? blocks, two stair pairs (one over a pit), a big 8-step staircase, flagpole and castle. 1-2 Underground: black sky, teal bricks, blue ground, brick ceiling and steps, coin shelves, three pipes. 1-3 Treetops: rounded green treetops on tall trunks over a bottomless drop, moving lifts. 1-4 Castle: grey stone, lava pits, rotating fire bars, a lift over lava, the bridge and axe. Levels are written with a small builder (ground, pipe, stairs, tree, put("B?B"), enemy marks) that produces text rows.

LOOK
NES palette: sky #5C94FC, ground and bricks #C84C0C with #FCBCB0 highlights and black mortar, ? blocks #FC9838 shimmering to #C84C0C and #883000, pipes #00A800 with #B8F818 highlight stripes and black outlines, hills #00A800 with dark spots, clouds white with #3CBCFC shading and bushes the same shape in #80D010, lava #E45C10 with #FC9838 waves.

RULES
Fixed 60 steps a second; physics in pixels per frame (walk 1.5, run 2.5, jump -4 / -4.8 with lighter gravity while held, max fall 4.5). Sound effects (jump, coin, stomp, bump, break, sprout, power-up, shrink, 1UP, kick, fireball, flagpole, clear fanfare, tally ticks, die, game over) and four original chiptune loops (overworld, underground, castle, star) synthesised with Web Audio, with a saved mute. TOP score, per-world best and cleared flags in localStorage. ?demo=1 runs an attract mode where a bot that simulates ahead plays from the title; ?level=1-3&at=40 jumps into a world at a column; ?screen=select opens the level select.

REMIX-READY
brand.ts holds the title, hero name, words, colours, level themes, hero palettes, physics and scores; each world is its own file under levels/; the hero, enemies and items are editable text pixel maps; rules, physics, blocks, actors, goal sequences, rendering, HUD, screens, touch layout, audio, music and the bot each live in small files. README.md maps it all.