What Are HTML5 Games?

HTML5 Game Definition

HTML5 games are predominantly played in the web browser and are compatible with a wide range of devices, from desktop computers to mobile devices.

HTML5 (as the term is most commonly used) encompases modern web standards (HTML5 markup, CSS 3 and Javascript) to create complex web based multimedia applications. HTML5 content runs directly in modern web browsers without the need for third party plugins (that aren’t available on mobile devices). So it has largely replaced the (soon to be discontinued) Flash web player and the (already discontinued) Unity web player, as the preferred development platform for web based games.

HTML5 will become the only platform for developing web based games by 2020.

Downsides

Although it has the advantage of providing mobile device compatibility in the web browser, HTML5 has some significant downsides when compared to plugin based technologies.

Most of these issues arise from the fragmented nature of the various browsers running the games. Many of these browser related issues can now be overcome by using tried, tested and actively maintained libraries and engines.

Some of the main issues are:

Outdated Browsers

Computers with an outdated web browser installed may not be able to run HTML5 games. A modern HTML5 compatible browser that supports all the features the game needs has to be installed.

This can prove especially problematic in situations such as on older PCs in corporate environments where they have outdate operating systems and browser software installed with no way to upgrade.

Browser Updates Can Break Games

Browser vendors are essentially left to their own devices when choosing how to interpret and implement the ever changing HTML5 standards. This means updates to browser software can have adverse effects on HTML5 games when run in that particular browser.

This can in some instances mean updates to games are required down the line to fix these issues if/when they arise.

All Assets & Code Are Loose Files

HTML5 games have to load individual assets, much the same as a standard web page would. They are not packaged in a single file. This makes it easy to download loose asset and code files in a easily readable and usable format.

Audio, video and code assets could be stolen and reused without permission. This can be particularly problematic if a game uses licensed assets created by a third party.

There are some ways to minify and obfuscate (to a limited degree) Javascript code (such as Google Closure Compiler, UglifyJS and YUI Compressor). This only provides limited protection for code only though.

Building HTML5 Games As Software Applications

Third party tools have enabled HTML5 games to be built as stand-alone offline software applications. This now makes HTML5 a viable development platform for developing games as Windows PC executables and mobile apps.

In fact some commercially released computer games have already been developed this way.

Using this method does have the downside of performance not being up to par, when compared with game applications developed using other technologies.

Some of the tools that can be used to build HTML5 games as software applications are:

  • NW.js (formerly Node Webkit) – Can target Windows, Mac OSX and Linux.
  • Electron – Another way of building Windows, Mac OSX or Linux applications.
  • Apache Cordova – Build HTML5 games as mobile apps for iOS and Android.
  • Adobe PhoneGap – Adobe distribution of Apache Cordova (with some differences).

HTML5 Game Engines, Frameworks & Tools

A plethora of code libraries and game specific frameworks & engines are now available for developing HTML5 games. Even commercial 3D game engines, such as Unity and Unreal can now target HTML5 for the web (although still fairly experimental in most cases, for 3D games and needing a hefty machine to run graphics heavy content).

Although it’s possible to write HTML5 games from scratch, existing libraries/engines not only help speed up the process, but handle cross-browser compatibility for you. This can be done via a collection of individual code libraries to handle individual task, or an all-in-one, game specific engine.

Some of the currently available options are:

Graphics Libraries

  • PixiJS – Fast, fully featured, WebGL accelerated 2D graphics library.
  • Three.js – One of the few 3D graphics libraries.
  • EaselJS – A graphics library based around the Adobe Flash animation timeline.

Sound Libraries

  • Howler.js – Fully featured Web Audio sound player library, with HTML5 Audio fallback.

Complete HTML5 Specific Game Engines & Frameworks

  • Constuct 2 – Self contained game creator software that builds games as HTML5
  • Euge.js – Easy to use and powerful 2D game engine. Includes lots of high level game specific features.
  • Phaser – Popular 2D HTML5 game framework.
  • ImpactJS – One of the very first 2D HTML5 game engines.

Get Our Newsletter

Sign up to our newsletter to get regular info and tips on using games for your business straight to your inbox: