Getting Started With HTML5 Game Development

There are plenty of valid ways to create an HTML5 game, and quite a bit of material on the technical aspect of each, so for this article I’ll be giving more of a broad overview of HTML5 game development. How “HTML5” can be better than native, where to start with the development process, where to go when you’re stuck, and how to monetize and distribute games.

Benefits of HTML5

Most of the audience here already sees the value in HTML5, but I want to re-iterate why you should be building an HTML5 game. If you are just targeting iOS for your game, write the game in Objective-C, the cons outweigh the benefits in that scenario… but if you want to build a game that works on a multitude of platforms, HTML5 is the way to go.


One of the more obvious advantages of HTML5 for games is that the games will work on any modern device. Yes, you will have to put extra thought into how your game will respond to various screen sizes and input types, and yes, you might have to do a bit of ‘personalization’ in the code per platform (the main inhibitor being audio); but it’s far better than the alternative of completely porting the game each time.

I see too many games that don’t work on mobile and tablets, and in most instances that really is a huge mistake to make when developing your game – keep mobile in mind when developing your HTML5 game!

Unique Distribution

Most HTML5 games that have been developed to this point are built in the same manner as Flash and native mobile games. To some extent this makes sense, but what’s overlooked is the actual benefits The Web as a platform adds. It’s like if an iOS developer were to build a game that doesn’t take advantage of how touch is different from a mouse – or if Doodle Jump was built with arrow keys at the bottom of the screen instead of using the device’s accelerator.

It’s so easy to fall into the mindset of doing what has worked in the past, but that stifles innovation. It’s a trap I’ve fallen into – trying to 100% emulate what has been successful on iOS, Android, and Flash – and it wasn’t until chatting with former Mozillian Rob Hawkes before I fully realized it. While emulating what worked in the past is necessary to an extent, The Open Web is a different vehicle for games, and innovation can only happen when taking a risk and trying something new.

Distribution for HTML5 games is often thought of as a weakness, but that’s just because we’ve been looking at it in the same sense as native mobile games, where a marketplace is the only way to find games. With HTML5 games you have the incredible powerful hyperlink. Links can so easily be distributed across the web and mobile devices (think of how many links you click in the Facebook and Twitter apps), and it certainly should not just be limited to the main page for the game. The technology is there to be able to link to your game and do more interesting things like jump to a specific point in a game, try to beat a friend’s score, or play real-time against that friend – use it to your advantage!

Take a good look at was has worked for the virality of websites and apply those same principles to your games.

Quicker Development Process

No waiting for compilation, updates and debugging in real-time, and once the game is done, you can push out the update immediately.

Choosing a Game Engine

Game engines are just one more level of abstraction that take care of a few of the more tedious tasks of game development. Most take care of asset loading, input, physics, audio, sprite maps and animation, but they vary quite a bit. Some engines are pretty barebones, while some (ImpactJS for example) go as far as including a 2D level editor and debug tools.

Decide Whether or Not You Need a Game Engine

This is largely a personal decision. Game Engines will almost always reduce the time it takes for you to create a fully-functional game, but I know some folks just like the process of building everything from the ground up so they can better understand every component of the game.

For simple games, it really isn’t difficult to build from scratch (assuming you have a JavaScript background and understand how games work). Slime Volley (source) for example was built without having a game engine, and none of the components were rocket science. Of course, Slime Volley is a very basic game, building an RPG from the ground up would likely lead to more hair pulling.

Choosing Between a “Game Engine” and a “Game Maker”

Most of the typical audience of Mozilla Hacks are probably going to lean toward using a game engine or building from scratch, but there is also the alternative of using a “Game Maker” like Construct 2. Using a Game Maker means you won’t actually write in JavaScript; instead, you create code-like events in the editor. It’s a trade of ease-of-use and quickness to prototype/develop vs customization and control over the end result. I’ve seen some very impressive games built with either, but as a developer-type, I tend to favor writing from scratch / using an engine.

Finding the Right Game Engine / Game Maker for you

There are so many HTML5 game engines out there, which in part is a good thing, but can also be a bad thing since a large percentage have either already stopped being maintained, or will soon stop being maintained. You definitely want to pick an engine that will continually be updated and improved over the years to come. is a great place to start your search because the hundreds of game engines are narrowed down to about 20 that are established, actively maintained, and have actual games being developed with them.

For a more complete list of engines (meaning there can be some junk to sift through), this list on GitHub is your best bet.

Learning Tools

If you’re going with a game engine, typically their site is the best resource with tutorials and documentation.

Technical Tutorials

Game Design Tutorials

With game development, the technical aspect isn’t everything – what’s more important is that the game actually be fun. Below are a few places to start when learning about game mechanics.

Helpful Game Tools

User Retention, Monetization and more

Full disclosure here: I am a co-founder at

Making a game function is just part of the equation. You also want players to play longer, come back, tell their friends about it, and maybe even buy something. Common elements in games that focus on these areas are features like user accounts, high scores, achievements, social integration, and in-game payments. On the surface most are typically easy enough to implement, but there are often many cross-platform issues and intricacies that are overlooked. There is also value in having a central service running these across many games – for example, players genuinely care about achievements on Xbox Live because Gamerscore matters to them.

  • – user accounts, high scores, achievements, in-game payments, analytics, distribution, and more.
  • Scoreoid – similar to above.

Development Tools

  • stats.js – A JavaScript performance monitor. Displays framerate, and performance over time.
  • Socket.IO – realtime client-server communication (if you’re going to have a backend for your game).
  • pixi.js – A canvas and WebGL rendering engine.
  • CocoonJS – Improves HTML5 game performance on iOS and Android with an accelerated canvas bound to OpenGL ES.


Regardless of what you’re building, extra motivation is always helpful. For games, that motivation often comes from surrounding yourself with others who are in the same boat as you – working on games.


js13kGames is a competition that is currently taking place at the time of this writing. You have until September 13th, 2013 to develop an HTML5 game that, when compressed, is less than 13kb.

Mozilla Game On

Mozilla runs a game competition every year from December through February with some fantastic prizes – last year’s was an all-expense paid, red carpet trip to San Francisco for GDC 2013.’s “Got Game?” (full disclosure, I am a founder) runs an annual HTML5 game development competition for students. Last year was the first year and we had over 70 games submitted. The next competition is planned for February / March 2014.

Ludum Dare

Ludum Dare isn’t for tangible prizes, nor is is specific to HTML5 games, but there are plenty of HTML5 developers that participate.

One Game a Month

One Game a Month isn’t so much a competition as it is an accountability tool. This isn’t restricted to HTML5 games, but many of the participants work with HTML5. The goal is to crank out one game every month. I wouldn’t recommend this long-term since one month is too short of a time to create a great game, but it’s good when learning to force yourself to develop and finish simple games.

Help From the Community

HTML5GameDevs has quickly become the most active community of HTML5 game developers. Most folks are very friendly and willing to help with any issues you run into.


#BBG is the go-to IRC channel for HTML5 games – you’ll even find quite a few Mozillians hanging around.

How to Make Money

In-Game Purchases

In-game payments, in my opinion, are the way to go for HTML5 game in the long-term. For now, most HTML5 games don’t have enough quality content, nor the game mechanics in place to get player purchasing items.

This is the revenue model with the highest potential, but it’s also the most difficult to achieve by far – not technically, but having the right game. I’d say the best way to learn how to properly monetize your game in this aspect is to take a look at games that do it really well on Flash and Mobile – games from and Zynga typically have this nailed down pretty well. There’s also some good reading material, like The Top F2P Monetization Tricks on Gamasutra.


Where we’re at right now with HTML5 games, licensing games is the strongest, most consistent way to make money – if and only if your game works well on mobile devices.

There are countless “Flash Game Portals” that receive organic mobile traffic, but can’t monetize it with the Flash games they have. Their solution is to go out and find HTML5 games to buy non-exclusive licenses (the right to put the game on their site, often making small adjustments) to offer their mobile visitors.

Typically non-exclusive HTML5 game licenses (meaning you can sell to more than one site) go for $500-$1,000 depending on the game and publisher. Some publishers will do a revenue share model instead where you’ll get a 40-50% share on any advertising revenue, but no up-front money.

Licensing is the safest way to make money right now, but the cap is limited – the most you’re going to make with a single game is in the $5,000-$6,000 range, but it is easier to hit that mark than it is with in-game payments or advertising.


Advertising is the middle-ground between in-game payments and licensing. It’s easier than in-game payments to make money and with a higher potential cap than licensing (but probably less than in-game payments). It’s easy enough to implement ads: just pick your ad network of choice (be wary of Adsense’s strict terms) and implement them either surrounding the game, or at various stopping points.

The commonly used ad networks are LeadBolt for mobile and CPMStar for desktop. You can also use which makes it a bit easier to implement advertising, and tries to maximize the revenue by using different ad networks depending on the device used and other factors.


The final stage in a game’s development is distribution. The game is done, now you want people playing the game! Fortunately, with HTML5 there are plenty of places to have your game (many of which often go unused).

More and more marketplaces these days are accepting HTML5 games as-is. Each has their own requirements (Facebook requires SSL, most require a differently formatted manifest file, etc…), but the time it takes to get into each is typically less than 30 minutes. If you want to reduce that even more, helps auto-generate the manifest files and promotional image assets you’ll need (as well as takes care of the SSL requirement) – documentation on that here.

Some marketplaces you’ll need to have a native wrapper for your game – primarily the iOS App Store and Google Play. A wrapper like PhoneGap is one option, but the native webviews have pretty terrible JavaScript engines, so for now you’re better off with tools like CocoonJS and Ejecta.

Now it’s up to you to go forth and make a great, innovative web game – I’m looking forward to see what’s on the horizon in the coming months and years!

About Austin Hallock

Austin Hallock is CEO of - provider of high-level tools and distribution for HTML5 game developers.

More articles by Austin Hallock…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. PixelCut

    WebCode is a vector drawing app that generates Canvas JavaScript drawing code. To showcase it, we’ve made a small HTML5 game drawn entirely with JavaScript. See:

    September 3rd, 2013 at 02:25

    1. Austin Hallock

      Looks very cool!

      September 3rd, 2013 at 11:55

  2. Max Schmitt

    Great article! I just wanted to mention node-webkit ( which is great for packaging HTML5-apps and games as native Windows/Linux/Mac-applications. I’m using it to develop and it just works.

    September 3rd, 2013 at 05:31

    1. Austin Hallock

      I definitely recommend Node-Webkit for the use cases where you want downloadable executables. It usually “just works” :)

      September 3rd, 2013 at 11:54

      1. Benjamin

        How did you manage to make a downloadable executable with Node-Webkit ?

        September 12th, 2013 at 09:20

        1. Max Schmitt

          Hey Benjamin! It’s really easy. The official Wiki has an easy how-to on this subject for each platform:

          September 12th, 2013 at 14:07

  3. Marcus Stenbeck

    Hey Austin!

    You’ve put together a really great resource that outlines the current possibilities for creating games with HTML5. I’d like to point out to anyone whose getting started with game dev to check out the excellent course on “HTML5 Game Development” at Udacity ( Now, I know what you Mozilla Hacks users are thinking* – “Hey, we are gentlemen and gentlewomen with no need for such basic education! Scoff!”… but I promise it does have some good stuff in it!

    Also, I would like to make a shameless plug for the WebGL 3D engine Goo Engine (where I work). I welcome any curious Mozilla Hacks readers to join our alpha. Just let us know you’re coming from Mozilla Hacks.

    * I know YOU would never be the one to think that. ;)

    September 4th, 2013 at 00:29

    1. Austin Hallock

      I thought I had the Udacity course in the Learning Tools section, but looks like I accidentally left it out.

      I’ve actually been trying to reach out to Goo to see what the connection to Austin, TX is (listed on the Twitter profile), but haven’t heard anything back. Shoot me an email?

      September 4th, 2013 at 13:52

  4. Fede Balboa

    HTML5 Canvas is dead ???

    September 4th, 2013 at 11:37

    1. Austin Hallock

      Not at all, quite the contrary actually. <canvas> games are alive and well – even more so has WebGL gains more and more support, and browser vendors continue improving their JavaScript engines.

      September 4th, 2013 at 13:44

  5. Ok

    “think of how many links you click in the Facebook and Twitter apps”…mmmm, never!

    September 5th, 2013 at 07:05

    1. Austin Hallock

      Guess I shouldn’t have such loaded sentences ;) Point is a lot of folks click links on Facebook and Twitter.

      September 5th, 2013 at 21:09

  6. Gabriele

    Do mozilla plan to let us choose the emulated type of cpu and amount of ram in the FFOS simulator ?

    September 6th, 2013 at 05:15

    1. Robert Nyman [Editor]

      That’s an interesting question. Right now I don’t know of any direct plans for that, but over time, it could definitely prove to be an interesting option.

      September 9th, 2013 at 00:38

  7. Yesiateyoursheep

    I’d also suggest “Gamemaker: Studio” by “YoYo Games”, it’s possibly the most visual gamemaker, with 2d object rooms and works well if you want advanced stuff – powerful script, supports Modding and now supports shaders! But it does cost a bit – $300 for all the features, $500 for all export modules, but unlike all the other game makers, this one can automatically port your game to every platform known to man! (exept java phones)

    September 8th, 2013 at 02:55

  8. Adrian

    I would also suggest a small addition to this excellent list. – I think you can get the idea by only looking at the domain name. This service will save you a lot of work and also is vital for monetizing an app. Best part is that is free.

    September 10th, 2013 at 20:06

  9. Amlan

    Well would the games made in HTML5 be supported on older mobile device and OS (Eg: Old android versions). ?

    September 16th, 2013 at 23:49

    1. Austin Hallock

      Games will work in older Android and iOS versions, but typically require a bit of extra work to get things like audio working – and a few other quirks. Performance isn’t great in older versions either. So yes, it can be done… but it’s not ideal by any means.

      September 17th, 2013 at 23:40

Comments are closed for this article.