CanyonRunner HTML5 Game

Click the image to play now!

Zack Proser CanyonRunner

Intro

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.

Screenshots

Intense Aerial Dogfights. Fight Off Marauding Bandits.

CanyonRunner Game Aerial Dogfight with Rockets

Wind Your Way Through the Eerie Story

CanyonRunner Chapter Screen

Intense Environmental Effects

CanyonRunner Environmental Effects

Auto-detects Mobile agents and renders a touchpad

CanyonRunner Chapter Screen

Catchy Music Keeps The Pace Throughout The Game

CanyonRunner Musical Score

Save System Keeps Your Score & Progress

CanyonRunner Save System

Multiple Endings For Higher Replay Value

CanyonRunner Game Two Different Endings

Key Features

  • 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.