At MarketJS, we receive many requests on how to build Endless Runner games.
Instead of diving into code, we’d like to approach this from a high level form of thinking. At the very least, this tutorial will teach you how to approach building and designing an Endless Runner game in HTML5. For simplicity’s sake, let’s abbreviate this as ER.
Essentially, this a game where a main protagonist runs forward into the game which never ends. One of my favorite endless runners is Jetpack Joyride.
Figure - Jetpack Joyride from 2011
The Endless Runner genre stems from 2D platformer games in the 90s. Back then, 2D platformers such as Super Mario were all the rage. The gameplay was simple, where the player controls all aspects of the main protagonist (Mario), including moving, jumping and shooting.
With the proliferation of smartphones and tablets since 2007, mobile consumption habits evolved to short-term attention spans. Users are more accustomed to ‘snackable gaming’, where game sessions are minutes instead of hours. To meet this demand, developers had to simplify 2D platformer games.
The first variation involved replicating the 2D platformer experience on the mobile device, without movement controls. Developers essentially made the main character constantly run. Players only had two controls — jump and shoot. The games were designed to be in endless mode. This was one of the earliers endless runners. Monster Dash was the perfect example of this. We call this two touch endless runner (2TER).
Figure - 2TER
The second variation is even more simplified. Instead of two touches, the game only has one touch control. This makes perfect sense — the mobile user is constantly on the go, holding the device on one hand. Developers started making characters automatically run and shoot. All the user has to do, is tap anywhere on the screen to jump.
This spawned a whole subset of one-touch endless runner (1TER) games, which include Jetpack Joyride (tap to boost the jetpack) and Flappy Bird (tap to fly higher)
Figure - 1TER
Mobile gaming habits of users, have actually encouraged developers to be more creative in their game design solutions. Simplicity is heavily rewarded with massive audiences.
Coupled with the idea of HTML5 being the driver of fast and nimble games, building an extremely simple ER makes a lot of sense.
There are many ways to start the design of an ER game. I’ll describe in general terms, how we arrived at our Santa Claus Chimney Challenge game design.
Initially, we didn’t even think of building an ER game. We simply wanted to build a Christmas-themed game that works well with HTML5.
The user plays Santa Claus withs his red-nosed reindeers. It’s Christmas, and Santa has to get to his destination to deliver gifts. We know that Santa goes through a chimney to deliver presents.
The first thought we had, was to have Santa drop into the chimney to deliver presents. This makes perfect sense! The design of the game would involve:
Holy crap! This was orders of magnitude more complicated that what we envisioned. This will be hard to pull off with HTML5. Imagine all the artwork needed to accomplish this. We had to rework and simplify our design. Back to the drawing board.
We also know that chimneys are made of these hard red bricks, which Santa could potentially crash into. To us, chimneys vary from heights (from those tall factory chimneys) to regular household ones. What if, we could make them as obstacles? We could vary the height, and Santa will have to avoid crashing into the chimneys.
Figure - Fitting Santa and his red-nosed reindeers between the chimneys
Alright then. Now we have Santa and his red-nosed reindeers. We have chimneys. The scrolling background could be a snowy one with nice homes and some trees. Looks like a recipe for an 1TER game.
Next, we thought about the difficulty of the game. Viewed from a 2D perspective, Santa and his red-nosed reindeers are seen as 5 separate blocks (santa and 4 other reindeers). They would interact with each other via a ‘chain’ mechanic.
This is perfect for us, because it’s naturally difficult to fit a chain in between chimney obstacles. We knew it was going to be fun for the users, because it gets tricky to fit all 5 objects in the chain, between the chimneys!
Now we have to tweak the difficulty of the game. We had to be sure:
The rest is simply wrapping it up into an ER mode, where points are scored for the distance covered by Santa.
I hope this article helps developers with their game design thinking. This approach can basically be applied to any other game genre for HTML5 game development. For more inquiries, feel free to drop us an email: [email protected]
|4 Common Missed Opportunities in Reskinning Games for Brands and Agencies||10-25-2019|
|Split Screen Chromecast HTML5 Games||07-21-2017|
|Funny Faces: Spatial Memory Game for Kids||05-17-2017|
|HTML5 Game for Cognitive Training||05-15-2017|
|Classic Game of Tic Tac Toe with New Fun Features||04-05-2017|
|4 in a Row: Two-Player HTML5 Game with a Chat System||04-04-2017|
|Smart Soccer: Physics-based Game with a Smart AI||04-03-2017|
|New 3D Game: Jumpee Land||04-03-2017|
|Escape from Aztec: New and Exciting Endless Runner Game||03-31-2017|
|Social Blackjack: Card Game with Friends||02-13-2017|
|Wasteland Warriors: a real time multiplayer game||11-28-2016|
|We built a Google Chromecast game||02-02-2016|
|Rising Cost Per Install In The App Economy||08-24-2015|
|New HTML5 Game: Monsters and Cake||07-24-2015|
|New HTML5 Game: Street Fight||05-15-2015|
|New HTML5 Game: Taxi Pickup||04-18-2015|
|Merchandising done right||02-28-2015|
|Superbowl Ad Recap : Clash of Clans||02-10-2015|
|The Old Game Flow Design||01-29-2015|
|New HTML5 Game: Guess The Celebrity||01-20-2015|
|New HTML5 Game: Leave Me Alone||01-12-2015|
|HTML5 Endless Runner: History and Design Thinking||12-14-2014|
|New HTML5 Game: Snowball Office Fight||11-15-2014|
|Thinking HTML5 with castle walls and moats||11-07-2014|
|Thoughts on Supercell videos||11-05-2014|
|New HTML5 Game: Hidden Objects Pirate Adventures||11-03-2014|
|Would a brand spend $20,000 to acquire 10,000 users?||10-09-2014|
|New HTML5 Game: Banana Jungle||10-08-2014|
|New HTML5 Game: Snowball Fight||10-08-2014|
|New HTML5 Game: Totem Volcano||09-12-2014|
|New HTML5 Game: Shark Attack||07-22-2014|
|Good old times with OpenRA||05-24-2014|
|Announcement: We acquired Artists&Clients||05-16-2014|
|New HTML5 game: Pop Star Dentist 2||05-06-2014|
|Indie Reality Check: Guidelines||03-23-2014|
|New HTML5 game: Slots Beach||01-27-2014|
|HTML5 Game Development Workshop||01-21-2014|
|How we can all learn from Jay-Z||12-22-2013|
|Product launch: Triumphs and Tribulations||12-12-2013|
|3 AM days and ways to avoid them||12-11-2013|
|When the errors keep coming, what do you do?||12-05-2013|
|What a great producer does||12-03-2013|
|Mini-Detachment Experiment 1: Stop reading tech news||11-29-2013|
|New game: Monster Mash||11-23-2013|
|Gmail is winning on mobile||11-20-2013|
|Why software matters||11-06-2013|
|Serendipity as a game mechanic||11-05-2013|
|A blast from the past: Buenos Aires||10-28-2013|
|Upcoming event worth attending||10-28-2013|
|New game: Sector 49||10-25-2013|
|New game: Vampire Dress Up||10-03-2013|
|New game: Kitten Bounce||09-25-2013|
|New game: Ships and Monsters||09-24-2013|
|iOS7 Mobile Safari: Big Branding Opportunity||09-21-2013|
|New game: Mouse and Cheese||09-19-2013|
|New game: Whats My Brand?||09-19-2013|
|New game: Royal Princess Dress Up||09-18-2013|
|New game: Feed the Grandma||09-18-2013|
|New game: Pop Star Dentist||09-18-2013|
|Mobile first mentality||09-17-2013|
|How to focus||09-13-2013|
|On raising money||09-12-2013|
|98 percent of everything is crap||09-10-2013|
|Common Fallacy #1||09-07-2013|
|Offline advertising done right||09-05-2013|
|Blogging from the phone||09-05-2013|
|Avoid gatekeepers, and focus||08-30-2013|
|Refresher - Mobile HTML5 browsers||08-29-2013|
|A dataset that I enjoy||08-29-2013|
|On the Paul Graham accent debacle||08-29-2013|