What others are playing with HTML5

This is a good opportunity to study how different HTML5 games perform by watching other HTML5 games that are made with different techniques.

Coca-Cola's Ahh campaign

Coca-Cola had run a campaign known as Ahh (http://ahh.com) with lots of interactive mini games. The interactions combined several techniques that included canvas and device rotation. Most of them work well in both desktop and mobile devices.

Asteroid-styled bookmarklet

Erik, a web designer from Sweden, created an interesting bookmarklet. This is an asteroid-styled game for any web page. Yes, any web page! It shows an abnormal way to interact with any web page. It creates a plane on the website you are reading from. You can then fly the plane using arrow keys and fire bullets using the space bar. The fun part is that the bullets will destroy the HTML elements on the page. Your goal is to destroy all the things on the web page that you choose. This bookmarklet is another example of breaking the boundary of usual browser games. It tells us that we can think outside the box while designing HTML5 games.

The following screenshot shows the plane destroying the contents on the web page:

The bookmarklet is available for installation at http://kickassapp.com. You can even design the space ship that you control.

X-Type

The creator of a Canvas-based game engine named Impact, created this X-Type (http://phoboslab.org/xtype/) shooting game for different platforms, including web browsers, iOS, and Wii U. The following screenshot shows the game running smoothly in iPhone.

Cursors.io

Cursors.io (http://cursors.io) demonstrates a nicely designed real-time multiplayer game. Every user controls an anonymous mouse cursor and takes a journey through the levels of the game by moving the cursor to the green exit. The fun part of the game is that players must help the others to advance to the level. There are toggles that some cursors click on them to unlock the doors. The anonymous players must take up the role to help the others. Someone will take your role so that you can advance to the next level. The more players that help you, the higher your chance is to succeed in the game. In case only a few players are playing and you can't experience the game, I have recorded my playing screen in 12 x speed (at http://vimeo.com/109414542) to let you have a glimpse of how this multiplayer game works. This has been captured in the following screenshot:

Note

We will discuss building a multiplayer game in Chapter 8, Building a Multiplayer Draw-and-Guess Game with WebSockets.