The benefit of creating HTML5 games

We have explored several new key features from HTML5 and CSS3. With these features, we can create HTML5 games on browsers. But why do we need to do that? What is the benefit of creating HTML5 games?

Free and open standards

The web standards are open and free for use. In contrast, third-party tools are usually proprietary and they cost money. With proprietary technologies, the support from them may drop because of changes to the company's focus. The standardization and openness of HTML5 ensures that we will have browsers that support it.

Support for multiple platforms

With the built-in support of all the HTML5 features in modern browsers, we do not require the users to preinstall any third-party plugin in order to play any file. These plugins are not standard. They usually require an extra plugin installation that you may not be able to install. For instance, millions of Apple iOS devices around the world do not support third-party plugins, such as Flash Player, in their mobile Safari. Despite whatever the reason might be, Apple does not allow Flash Player to run on their Mobile Safaris, instead, HTML5 and the related web standard are what they get in their browsers. We can reach this user base by creating HTML5 games that are optimized for mobiles.

Native app-rendering performance in particular scenarios

When we code the game in a Canvas, there are some rendering engines that can translate our Canvas drawing code into OpenGL, thus rendering in native mobile device. This means that while we are still coding the game for a web browser, our game can gain benefits in mobile devices by the native app OpenGL rendering. Ejecta (http://impactjs.com/ejecta) and CocoonJS (http://ludei.com/cocoonjs) are two such engines.

Breaking the boundary of usual browser games

In traditional game designing, we build games within a boundary box. We play video games on a television. We play Flash games in web browsers with a rectangle boundary.

Using creativity, we are not bound in a rectangle game stage any more. We can have fun with all the page elements.

Twitch (http://reas.com/twitch/) is a game from Chrome Experiments. It is a collection of mini games where the player has to carry the ball from the starting point to the end point. The fun part is that each mini game is a small browser window. When the ball reaches the destination point of that mini game, it is transferred into the newly created mini game browser to continue the journey. The following screenshot shows the whole map of Twitch with the inpidual web browsers:

Building HTML5 games

Thanks to the new features of HTML5 and CSS3, we can now create an entire game in the browser. We can control every element in the DOM. We can animate each document object with CSS3. We have Canvas to dynamically draw things and interact with them. We have an audio element to handle the background music and sound effects. We also have Local Storage to save game data, and WebSocket to create a real-time multiplayer game. Most modern browsers are already supporting these features. It is now time to build HTML5 games.