HTML5 Game Definition

What Are HTML5 Games?

HTML5 encompasses modern web technologies (HTML 5 markup, CSS 3 and Javascript) to create complex multimedia applications. HTML5 games utilise this technology to run directly in modern web browsers.

Cross-Platform Play

With HTML5, fun web games can be played across a huge range of devices from desktop PCs to smartphones and tablets by simply entering a URL or clicking a link in the web browser.

Web Games Before HTML5

Prior to HTML5, Adobe Flash was the main technology used to create web based games. Flash however was never properly supported in mobile browsers and Apple blocked it from being used in the browser on their devices, which was a big factor in the web player eventually being discontinued.

Another plugin based choice was the Unity web player. As plugin-in based solutions fell out of favour, Unity discontinued theirs in favour of an HTML5 export solution.

Input Devices & Controllers

HTML5 can utilise a broad range of input devices, including keyboard, mouse, touchscreen and even traditional gaming controllers such as joysticks, gamepads and steering wheels via the Gamepad API.

HTML5 Compatibility

Browser vendors are essentially left to choose how to interpret and implement the ever changing HTML5 standards. This can make cross-browser compatibility and testing across all target platforms tricky.

HTML5 Game Development

Although it's possible for HTML5 game developers to program all Javascript from scratch, existing libraries/engines help speed up the development process for both single player and multiplayer games and handle most cross-platform compatibility issues.

Development Tools

Although it's entirely possible to create simple HTML5 games from scratch using only free tools, commercial alternatives can offer more features to help streamline the process for more involved projects, from asset creation to programming and final game build.

HTML5 Game Engines, Frameworks & Tools

A plethora of free and paid game specific libraries, frameworks & engines are now available for HTML5 game development.

Commercial 3D game engines, such as Unity & Unreal can now be used to make HTML5 games for use online.

Some of the currently available options for making HTML5 games are:

Multimedia Libraries

  • CreateJS - A suite of free libraries, designed to integrate with Adobe Animate, for building HTML5 multimedia content. (open-source)

Graphics Libraries

  • PixiJS - Fast, free, fully featured, WebGL accelerated 2D canvas graphics library. (open-source)
  • Three.js - One of the few 3D graphics libraries. (open-source)

Sound Libraries

  • Howler.js - Fully featured Web Audio sound player library, with HTML5 Audio fallback. (open-source)

Complete Game Engines & Frameworks

  • Phaser - Popular free 2D HTML5 game framework. (open-source)
  • Constuct - Self contained game creator software that builds games as HTML5. (commercial)
  • Euge.js - Easy to use and powerful 2D HTML5 game engine. Includes lots of high level game specific features.
  • ImpactJS - One of the very first 2D HTML5 game engines. (previously commercial, now open-source)

Final Build Packaging

HTML5 games have to load individual assets, much the same as a standard website page would. They are not packaged in a single file.

There are some ways to minify and obfuscate (to a limited degree) Javascript (such as Google Closure Compiler, UglifyJS and YUI Compressor). This only provides limited protection for game code only though and doesn't stop loose asset files from being dowloaded from a site.

Building HTML5 Games As Software Applications

Third party tools have enabled HTML5 games to be built as stand-alone offline software applications. This means HTML5 games can now be built as Windows PC executables and mobile apps for offline play.

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

Using this method does have the downside of game performance not being up to par, when compared with games applications created 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 as apps for play on iOS and Android.