A lot has changed since the days when web developers relied almost exclusively on Flash for media-rich interactive content. While the technology is still very much alive and may not see a replacement for some uses anytime soon, more and more websites are implementing HTML5 for audio and video streaming, and we are starting to see some applications in the gaming space as well. .
HTML is a markup language for structuring and presenting content on the web. Its latest and still-in-development avatar combines a variety of elements and features that make it easy to incorporate and handle multimedia and graphical content on the web without resorting to proprietary plugins.
Three elements for media and related APIs introduced by HTML5 are the audio element, which allows developers to add in-browser audio to a document or application, video to in-browser video without the messy embeds and object tags. Elements, and the canvas element and API that provides a 2D drawing surface that can be used for everything from a simple animation to a complex game.
Although it is still going to take some time until the HTML5 specification is finalized, it is already relatively stable and there are implementations that are nearing completion. Recent versions of all major browsers largely support HTML5, and about 80% of videos on the web are encoded in H.264 according to data from MeFeedia, which means they can be distributed within HTML5’s video tag. – although for commercial reasons (read: advertising and copy protection) they are not yet always delivered via HTML5.
As far as gaming is concerned, there are some impressive examples that can easily rival some of the stuff that’s been done on Flash over the past decade. We’ve compiled a small selection of old classics and modern titles built with HTML5 and other open web standards that will give you a taste of what’s to come.
Old classics ported to HTML5
Command and Conquer: Tiberian Dawn
The classic real time strategy game Command & Conquer was completely rebuilt in HTML5, running on 69k JavaScript, by an enterprising developer named Aditya Ravi Shankar, who wanted to improve his coding skills.
It took three-and-a-half weeks to put together the first build, including files from the original game, to get the sprites, sounds, and unit specs correct. The project is not yet complete and there are still some improvements to be made, but it is nonetheless a great example of the potential of HTML5 for games. The game works best in Chrome or Firefox and the source code is available on Github.
wolfenstein 3d
This implementation of id Software’s 1992 game, Wolfenstein 3D, was made using JavaScript and the canvas element. With some modifications, all of the first floor is mapped, but it’s more of a proof-of-concept than an actual playable game. There is no AI for guards, for example, they just stand and wait to be shot.
Other well-known first-person shooters have also been ported to HTML, including Doom – which was dropped from id Software – and Quake II after a cease and desist notice. The latter was actually ported by Google employees to show what is possible with HTML5 in the browser. The game is playable without plug-ins at up to 60 frames per second with full HTML5 audio and WebGL rendering. Unfortunately, it isn’t hosted online, but has installation instructions available on its Google code page. There is also a video of the game in action here.
google pac-man
Released as a tribute to the 30th anniversary of the popular arcade game, Pac-Man, it was Google’s first interactive, playable doodle and was so well received by users that the company initially offered it for only 48 hours. Instead, it was decided to host it indefinitely. ,
The game is based on HTML5 with a fall-back Flash option for browsers that do not yet support it. Like the original Pac-Man, Google programmed the game to glitch and end on the 256th screen, although it appears to have been cut down to a single level built around the Google logo. Still, a worthy example of HTML5 capabilities based on 1980s popular culture icons.
cut the rope
Designed to help promote Internet Explorer 9 and the Beauty of the Web campaign, a desktop HTML5 version of the hugely popular Cut the Rope game was made available online for free from a partnership between Microsoft and developer ZeptoLab. The game is playable on any compatible HTML 5 browser, not just IE.
For those unfamiliar, Cut the Rope features a green monster named Om Nom that you have to feed candy by cutting and manipulating ropes, airbags, and bubbles. It is highly addictive and has been downloaded millions of times on mobile platforms. This port showcases HTML5 capabilities such as canvas-rendered graphics, browser-based audio and video, CSS3 styling, and WOFF fonts. Interested developers can check out their proxies page for inspiration.
