CanyonRunner HTML5 Game
Click the image to play now!
Building CanyonRunner was my favorite development experience in recent memory. Making my first game means coming full circle to when I first started playing video games at age 3.
My intent with CanyonRunner was to build a simple, solid HTML5 game that works on desktop and mobile, features a story and all the basic game systems you'd expect such as a progress saving system, top scores, different game dynamics on each level and two different endings.
Including the time spent learning the new framework, building CanyonRunner took me exactly 76 days of a few spare working hours here and there each day.
Intense Aerial Dogfights. Fight Off Marauding Bandits.
Wind Your Way Through the Eerie Story
Intense Environmental Effects
Auto-detects Mobile agents and renders a touchpad
Catchy Music Keeps The Pace Throughout The Game
Save System Keeps Your Score & Progress
Multiple Endings For Higher Replay Value
- Desktop & Mobile Ready
- TopScore, TopTime & Level Progress Save System
- 3 Different Levels with Unique Game Mechanics
- 2 Endings - Depending on How Quickly You Complete The Game
Technical Details & Takeaways
CanyonRunner is built with the excellent HTML5 gaming engine Phaser, which I cannot recommend highly enough. It was fun learning about the basic physics patterns behind 2D side-scrollers.
Ultimately, I learned the most about compressing and packaging assets correctly for fast delivery to mobile devices. I used a single spritesheet and a single audiosprite to drastically reduce the number of http requests required to load the game on a mobile device.
We all know it's annoying to be in the middle of a game and lose your progress because something comes up. I was able to take advantage of localStorage to create player-specific objects that are written to at various points throughout the game.
This system also allows for the final determination of which ending a player will receive. When the final level is successfully completed, the game inspects the player object and determines how long it took the player to complete the game. Depending upon this total time calculation, they are shown one of two possible "Game States".
Regardless of which ending they get, the player has a chance to share their gaming experience on Twitter - via a built-in button that autopopulates a Tweet for them and includes a link back to the hosting site - helping to drive more social traffic for myself and my sponsors.