HTML5 Endless Runner - Design Thinking

9 min read

HTML5 Endless Runner - History and Design Thinking

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.

What’s an Endless Runner (ER) game?

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.

HTML5 Endless Runner - History and Design Thinking

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

HTML5 Endless Runner - History and Design Thinking

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)

HTML5 Endless Runner - History and Design Thinking

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.

Approaching ER design for HTML5

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:

  • positioning Santa into a chimney
  • having Santa climb down the chimney, to a christmas tree, inside a house
  • having Santa deliver the presents to kids, and scoring points
  • drawing the necessary artwork for this

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.

HTML5 Endless Runner - History and Design Thinking

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 chimneys aren’t too tall 
  • the jumping mechanic ( the object chain) works extremely well in avoiding the chimneys
  • the chimneys shouldn’t spawn that often (so the players can have some emotional relief in between chimneys)

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]

Christmas Design

About the blog

MarketJS is a company that leverages HTML5 to provide cross-platform solutions to clients. We have been serving clients since 2012.

About MarketJS

MarketJS offers a variety of products and services:

  1. We operate a B2B Marketplace for other companies and brands to license high quality games.
  2. We help companies reskin existing games from our portfolio.
  3. We operate game feed for clients.
  4. We partner with high traffic channels to engage and monetize their users.
  5. We design and develop custom games for brands.
  6. We develop game solutions for taxis, airlines, hospitals, schools and more.
  7. We build playable ads for app and gaming companies.

How to reach us

We can be reached at support at marketjs dot com.

What our clients say about us

"We found MarketJS very easy to work with, and were impressed with how quickly they delivered and responded to our questions."

Rebecca MacDonald, VP of Marketing, Active Navigation

"MarketJS was very easy to work with, and they were always responsive to our questions and requests"

Jeff Robertson, Vice President of Technology & Operations, Carbon8

"MarketJS consistently delivers quality games on time and on budget. They are a great partner."

Scott Sheppard, President and CTO, MoZeus

"We had a great experience working with MarketJS. They were able to move fast on a tight timeline project and deliver exactly what we required with record time and quality. Definitely will be working with them on future projects to help bring our client’s digital needs to life."

Lauren Boutette, Account Director, Lumency

"MarketJS went above and beyond to deliver our projects tailored to our needs. Very swift and quick response and turnaround time. Highly recommended."

Yazan Al Tamimi, Account Manager, Socialize Agency

"Thanks so much for the work your team did. MarketJS was able to work with us to create a custom solution that exceeded our expectations."

Mike Davis, Sales Manager, ComQi

"We are really satisfied with MarketJS. They are quick to help with any troubleshooting and implementation."

Liliya H., Content Specialist, Telecoming

"It was a great pleasure working with MarketJS, they really helped thinking along with our needs. The delivery of the content was always quick and every custom request we had was possible to develop."

Willem van Ditzhuijzen, Business Development, CreativeClicks

"We are extremely happy with the content and service which MarketJS has provided us."

Matt McPherson, Director / Strategic Accounts , Wildtangent

"MarketJS provided excellent support and responded well to ad-hoc requests."

Seah Li-Wei, Project Manager, Spoon Creative

"MarketJS collaborated with our team really well and delivered quality work."

Kevin MacDonald, CTO, TeachTown

"MarketJS has been outstanding; they were patient and very helpful in delivering quality service that matches our custom game requirements."

Marlon Santos, Researcher and Senior Software Engineer, University of Sydney

"We've worked with MarketJS on a number of games now and always find them to be easy and efficient to work with."

Ben Gilbert, Project Manager, Ichi Worldwide

"We are very pleased working with MarketJS, it was far above our expectations in terms of deliverables."

Didier Seevraz, Digital Media Specialist, Lottotech

"MarketJS was fast, responsive and very customer focused. It was a pleasure to work with them."

Bryan Wursten, Senior Digital Editor, Boy Scouts of America

Interested? Request a free consultation

Our team shall be in touch within 12 hours.

Note: Please use your corporate email address. We currently do not accept inquiries from email providers.

     In order for MarketJS to respond to my inquiry, I agree to the Terms of Service and Privacy Policy of this website.
     I would like to subscribe to the MarketJS newsletter, for the latest games, case studies and products
Why subscribe to our newsletter? Thousands of executives and key decision-makers rely on our monthly newsletter for game ideas to boost their business.

  • - One of our subscribers (and client) captured over 500k USD worth of business from one game idea alone.
  • - Another subscriber (later turned long-term client) generated an ROI of 300% on their monthly ad spend. They spend 8 figures US dollars each month on paid user acquisition, hence new game ideas matter to them.
  • - Another subscriber (and also loyal customer), a publicly listed company with over 30,000 employees is using our monthly game ideas to motivate and encourage positive behavior throughout their organization.