A fan-style 8-bit platformer that plays in the browser: 10 heroes, 4 worlds and 16 stages, built with React, Phaser and TypeScript, on desktop, tablet and phone.
EMBERLEAF is a 2D side-scrolling platformer in the spirit of classic 8-bit adventures. You pick one of ten heroes, run and jump through four themed worlds, stomp enemies, bump blocks for coins and power-ups, and reach the flagpole at the end of each stage. World 4 ends with a boss fight. It was a learning project, and I built it end to end: the game, the menus, the touch controls and the deployment.
A game has to feel right in the first second, on any device. The hard parts were making jumping and running feel like a real platformer, keeping a game engine and a React interface from getting in each other's way, and making the whole thing playable with thumbs on a phone as well as with a keyboard.
Play, World Map, Hero Roster, Controls, Settings and a Stage Inspector.
Ten heroes with different speed, jump, power and defense, and a special move on X.
A short intro card, then the level is built in code: terrain, blocks, hazards and enemies.
Run, jump, stomp enemies and bump blocks, with a 300 second timer and three lives.
Reach the flagpole. Pause, restart, retry and next stage are one tap away.
RIKOBalanced. Ember Burst: a short-range fire blast.
MIKOSpeedster. Lightning Dash: a fast dash while invincible.
VOLTAcrobat. Thunder Leap: a big upward leap.
BLADENinja. Shadow Slash: a blast in front of the hero.
AEGISTank. Iron Barrier: a gold shield for 3.5 seconds.
SHINShinobi. Kunai Storm: a blast in front of the hero.
CINDERFlame Rush. Inferno Blast: a short-range blast.
FROSTIce Shield. Glacial Freeze: freezes every enemy for 3 seconds.
AEROWind Leap. Cyclone Lift: the highest leap of all.
TITANHeavy Brawler. Earthquake Stomp: shakes the screen and defeats every enemy.
Problem. React is great for menus and Phaser is great for games, but both want to be in charge.
Solution. They never touch each other's internals. A small event bus carries messages like score updates, game over, pause and restart, and a shared touch-input object is read by the game every frame.
Problem. A keyboard game has no buttons to press on a touch screen.
Solution. The game is a 16:9 screen that scales to fit, with on-screen buttons that use pointer capture, so holding right and tapping jump works at the same time. In portrait the buttons dock below the game, in landscape they float over it.
Problem. Lots of images and sounds make a game slow to load.
Solution. Blocks, pipes, ground tiles and clouds are drawn in code, and the sound effects are synthesized with the Web Audio API, so there is almost nothing to download.
Problem. A jump that always goes the same height feels stiff.
Solution. Holding the jump key jumps higher, and running builds momentum, so movement has weight and the player controls how far they go.
Problem. The game engine is a big file, and it slows the first visit.
Solution. The build puts Phaser in its own chunk, so returning visitors load it from cache and the app code stays small.
React 19 and TypeScript draw the main menu, the HUD, the pause and game-over screens, the modals and the touch controls.
Phaser 4 runs one play scene: the terrain, blocks, enemies, the player, the camera, specials, damage and the boss.
An event bus for messages between React and Phaser, and a shared touch-input object that the game reads each frame.
Sound effects are generated live with the Web Audio API, with a small helper for menu clicks.
Tailwind CSS 4 and hand-written CSS. The game uses a unit equal to 1% of its width, so text and buttons scale with the screen.
A static Vite build on Vercel, redeployed on every push to main.
EMBERLEAF is live and playable on desktop, tablet and phone. It was a chance to work on things a web app does not need: a game loop, physics, input from keyboards and fingers, and a screen that has to feel right at every size. I tested it at a desktop size, a phone in landscape and a phone in portrait.
Terrain and item art is Kenney's "Platformer Art: Pixel" (CC0). The hero animation sheets are from the free Ozzbit Games pack, credited to Ozzbit Games and used for personal, non-commercial purposes. This is an independent, fan-style project made for learning and fun. It is not affiliated with or endorsed by Nintendo.