Inspiration:
Most mobile runner games feel cramped because they are played in portrait mode. Our inspiration was the Chrome Dino game, but we wanted to solve the Visibility Gap. By forcing a 1600px wide horizontal field of view, we give players the "pro-gamer" advantage of seeing obstacles twice as far away as standard mobile games.
What it does:
Flare Horizon is a performance-optimized horizontal runner that transforms a mobile browser into a wide-screen arcade experience. By utilizing a custom 1600-pixel internal viewport, the game provides players with double the reaction time compared to traditional portrait-mode mobile runners. It features a dynamic difficulty curve where "Heat" (speed) increases as you dodge magma spikes and airborne cinders.
How we built it:
We used a "Vanilla" stack (HTML5, CSS3, and JavaScript) to ensure zero lag and instant loading on any mobile browser.
Challenges i ran into:
The primary technical hurdle was coordinate remapping. Because the game is physically rotated 90 degrees via CSS, the browser's native touch sensors were inverted—treating vertical swipes as horizontal movements. We had to write a custom JavaScript listener to "hijack" the X-axis inputs and translate them back into vertical game actions (Jump and Slide) so the controls felt natural.
Accomplishments that I am proud of:
I successfully built a visually reactive game with procedural animations—including a flickering fire-helm and sine-wave leg cycles—using 100% code rather than heavy image files.
what I learned:
I gained deep insights into the Mobile Viewport API and the complexities of device orientation. We learned that creating a professional gaming experience on mobile requires more than just logic; it requires a deep understanding of how hardware orientation interacts with software rendering
What's next for Flare Horizon:
I plan to implement Parallax Scrolling backgrounds to add depth to the volcanic environment. We are also exploring WebAudio API integration to create speed-synced music that intensifies as the "Heat" level increases. Would you like me to generate a "Built With" list of tags (like HTML5, JavaScript, etc.) for you to copy into that section?
Log in or sign up for Devpost to join the conversation.