← Back to Portfolio
Flappy Bird Jollibee Edition
A simple canvas-based game loop rendering a fun localized version of Flappy Bird.
How It Works
This game is powered by game-reactor, a lightweight, custom-built game development SDK designed natively for ReactJS. Rather than relying on heavy third-party gaming frameworks, it utilizes a pure HTML5 <canvas> rendering context to handle high-performance 2D operations.
- Deterministic Update & Render Loop: The engine completely decouples mathematical game logic from visual rendering. It continuously fires a highly optimized update loop that calculates object physics, gravity velocities, and hit-box collisions incrementally based on the target FPS timeline.
- Dynamic Sprite Sheet Rendering: Instead of bogging down memory with hundreds of individual image files, the SDK efficiently slices dynamic animation frames from tightly packed sprite sheets. During the render phase, it computes the exact pixel coordinates required for the current animation state and precisely paints them onto the canvas buffer in real-time.
- React Integration: By integrating seamlessly with React's component lifecycle, the game loop preserves native 60FPS performance within the canvas while allowing UI states and configurations to communicate fluidly across the application boundary.