Super Mario: 8-Bit Canvas Platformer
Classic 1985 NES platformer recreated with HTML5 Canvas and procedural Web Audio API chiptunes.
Game Engine & Systems Architect
2024 • Live
Game Engine Architecture & Canvas Graphics
Super Mario is a complete retro platformer engine developed from scratch in TypeScript and Next.js 14. Operating at an authentic 256x240 integer pixel resolution with crisp nearest-neighbor scaling, it features custom tile-based AABB collision physics, gravity and momentum calculations, Goomba enemy AI patrol behaviors, breakable coin blocks, and power-up transformations. The audio system is 100% procedurally synthesized in real time via the Web Audio API with zero external MP3s.
A faithful browser recreation of the iconic Super Mario Bros platformer built with Next.js 14, TypeScript, HTML5 Canvas API, and procedural Web Audio API sound synthesis.
CHALLENGE & ARCHITECTURAL SOLUTION
Replicating authentic NES physics (inertia, momentum, tile collision) and 8-bit sound effects in modern web browsers without heavy third-party gaming engines or audio bloat.
Engineered a custom TypeScript game loop on top of HTML5 Canvas using requestAnimationFrame, paired with a custom procedural synthesizer that generates square/triangle waveforms natively in Web Audio API.
ARCHITECTURAL BLUEPRINTS
Integer Scaling Pixel Buffer
Renders to an offscreen 256x240 buffer and blits with imageSmoothingEnabled = false for tack-sharp retro pixel art.
Web Audio Oscillator Synthesis
Real-time procedural generation of jump blips, coin chimes, and death jingles using custom frequency sweeps.
AABB Tilemap Collision Resolver
High-frequency bounding-box collision sweeps preventing sprite clipping into solid pipes or blocks.
CORE SYSTEM CAPABILITIES
Custom 256x240 retro integer-scaling canvas engine running at locked 60 FPS
Tile-based AABB physics engine: momentum, acceleration, variable jump heights, and collision detection
Procedural chiptune sound synthesizer using Web Audio API square and triangle waves (zero external sound files)
Interactive world entities: Breakable brick blocks, coin question boxes, mushrooms, and patrolling Goombas
Mario state evolution: Small Mario to Super Mario transformation with sprite expansion and invulnerability frames
Cross-platform inputs: Keyboard controls (Arrow keys / WASD / Space) and responsive on-screen touch virtual D-pad
Tic-Tac-Toe: Interactive Web Game
Turn-based retro arcade game with 8-vector winning algorithms and responsive grid.
PromptMan: Native Desktop LLM Workbench
One prompt. Many models. Real numbers. Native Rust desktop LLM workbench with side-by-side streaming & token cost auditing.
NEED SCALABLE ARCHITECTURE CRAFTED WITH RESTRAINT?
Whether you need to architect a high-concurrency web platform, build a native desktop application in Rust, or deploy production Android apps — let's build together.