El Pollo Loco

A 2D jump-and-run browser game rendered on HTML5 Canvas, with a Vue 3 layer for the interface and game state. The player runs, jumps, collects coins and bottles, defeats enemies and faces a final boss — on desktop and mobile alike.

This was my deep dive into game architecture: physics, collisions, an animation loop and a lot of object-oriented design.

• A playable platformer with a character, enemies, a boss and collectibles
• A start screen with rules, controls and sound
• Health and coin bars that react to gameplay
• Responsive controls for keyboard (desktop) and touch (mobile landscape)

The engine is built around a clean object-oriented design: a base movable-object class provides position, velocity and gravity, and dedicated subclasses handle the character, enemies, throwable bottles and parallax background layers. A central game loop drives movement, collision detection and animation frame by frame. Vue 3 sits on top for menus, overlays and state, keeping the DOM UI separate from the canvas rendering.

Games make you respect structure. Without a clean class hierarchy and a single game loop, physics and collisions turn into spaghetti fast. Building it object-oriented from the start kept new mechanics — a new enemy, a new item — cheap to add.