Browser-based games are uniquely positioned at the intersection of the web and games, inheriting all the capabilities and resources of the web and browser technology. However they also face many of the same problems associated with developing for the web, while still retaining the intrinsic challenges of game development. One fundamental challenge of web development is providing access to the diversity of devices accessing the web, allowing users to interact with content regardless of platform or connectivity. One strategy for working with such diversity — progressive enhancement — is of significant benefit to browser-based game developers, and can help realize the full potential of games on the web.

Progressive Enhancement

Progressive enhancement is a web development strategy whose basic principle is to begin with the simplest representation of content, adding complexity as required, up to the limitations of the means of access. Its goal is to always provide content regardless of the capabilities of the device used to access that content. In practice, this means starting with pure content (text, images, etc.) and adding features to enhance the representation of the content (fonts, colors, etc.) toward aesthetic and utilitarian goals without creating dependencies on those features.

As more people use mobile devices for web browsing, web developers have adopted a “mobile first” approach, taking into account the reduced technical capabilities of mobile browsers and networks, simplifying the display of content to maximize performance and accessibility. By applying this same approach, browser-based game developers can create games playable on a wide spectrum of mobile devices operating on unreliable networks, while allowing for increased capabilites and advanced features on other devices. Simply put, using progressive enhancement in browser-based games can allow more players to play more often.

From a technical viewpoint, any game can be reduced to a simple set of data with an interface. Players provide input through the interface, rules define how the input affects the data, and a representation of the data is returned to the player back through the interface. If we begin with a simple representation of the data, with a simple interface, we can design a game that can be played using simple means.

To demonstrate, we can start with a simple maze game where the player moves from a starting point on a two-dimensional map to an end goal. As data, the game world is merely a two-dimensional array of spaces, each of which may be occupied by either a wall, the player, the goal, or nothing (empty space which the player can move through). We can represent the state of each space (i.e. what occupies the space) just by using ASCII characters:

This is, for all intents and purposes, a complete game. It doesn’t rely on any graphics, uses minimal JavaScript, and doesn’t even use CSS. But it is a fully playable experience capable of running well on the least capable of devices, and requires very little bandwidth to download. It’s basically as close to the actual data as we can get, quite literally outputting a two-dimensional array and little else.

Of course this is an extreme example, and modern browsers — even on most mobile devices — are capable of far more than this example shows. However, by starting with a simple representation like this, we have established a foundation from which we can add complexity without becoming dependent upon it.

The next step will be to provide some additional HTML structure that we can apply some CSS to. We’ll do this by creating a translation function in JavaScript that can map the simple ASCII characters to snippets of HTML. This provides a logical separation between the data representation of the game and the visual representation.

Just by adding simple colors and a small amount of layout styling via CSS we’ve vastly improved the look and feel of the game. The additional HTML has no affect on the game’s data model, and it will still work as it did before with CSS disabled.

At this point the code doesn’t require any conditional logic based on browser capability, but if we want to continue adding visual complexity we’re going to need to detect what features we have access to. To accomplish this, we’ll use the Modernizr.js library and add more complicated CSS to improve the look of the game.

Modernizr performs a series of tests, and based on the results, applies classes to the html element of the page. This makes it easy to use feature-specific CSS rules to enhance the content. In the example above, we’re replacing the solid background colors of the tiles with images, but only if the browser supports the background-size property. In this case, we want to be able to use background-size to ensure the image fills the entire tile regardless of the tile’s actual pixel dimensions. In addition, we are checking for CSS animation and transition capability, allowing us to animate the rotation of the goal and transition the location of the player.

We can iterate further on this, adding audio, animated sprites, even rendering to canvas or WebGL if the browser supports it. And we can use JavaScript like Modernizr to detect browser features, scaling our use of technology based on availability. But while progressive enhancement techniques are primarily driven by hardware and software capability, it isn’t all about pushing the limits of the available device.

At its core, progressive enhancement is about providing access to content and giving the user control of its presentation. In the next example, I’ve added a simple radio button to control how the game gets displayed. Given the foundation we started with at the beginning and building progressively upon it, creating methods of customization like this requires a small amount of effort.

We can easily control what features are used, not only based on the capabilites of the browser, but on the preferences of the player. We could even step back to the simplest version of our game and create a version playable by voice control, or through a screen reader, and maintain the ability to upscale to a fully animated graphic experience. As a result, progressive enhancement techniques can help browser-based games have an incredible, unique level of customization, while increasing the availability of great gaming experiences to everyone.