Chapter 1

Gaming on the Web

In This Chapter

• Finding out what HTML5 is and where it came from

• Seeing HTML5 within the context of games

• Looking at important new features

• Enabling feature detection and dealing with legacy browsers

BEFORE I DIVE into code, I want to establish the context of the technology we use. In this first chapter, I discuss what HTML5 is as well as some of the history that led to the HTML5 specification.

One of the most interesting aspects of HTML5 is how game developers can profit from many of its new features. In this chapter, I introduce you to some of those features and give you a few quick examples of how to use them. I talk about the canvas element and WebGL and the huge improvement they make in creating dynamic graphics. I also cover the audio element and the added multiplayer possibilities created by the WebSocket specification.

Everybody likes new toys, but remember that in the real world, old and outdated browsers keep many users from taking advantage of these cutting-edge features. In this chapter, I discuss a few tools that can help you detect which features you can safely use as well as how you can use these feature tests to load appropriate fallback solutions when necessary.

Finally, I briefly introduce the puzzle game that I use throughout the rest of the book to take you through the creation of a complete HTML5 game.

Tracing the History of HTML5

HTML, the language of the web, has gone through numerous revisions since its invention in the early 1990s. When Extensible Markup Language (XML) was all the rage around the turn of the millennium, a lot of effort went into transforming HTML into an XML-compliant language. However, lack of adoption, browser support, and backward compatibility left the web in a mess with no clear direction and a standards body that some felt was out of touch with the realities of the web.

When the W3C finally abandoned the XHTML project, an independent group had already formed with the goal of making the web more suitable for the type of web applications you see today. Instead of just building upon the last specification, the Web Hypertext Application Technology Working Group (WHATWG) began documenting existing development patterns and non-standard browser features used in the wild. Eventually, the W3C joined forces with the WHATWG. The two groups now work together to bring new and exciting features to the HTML5 specification. Because this new specification more closely reflects how web developers already use the web, making the switch to HTML5 is easy, too. Unlike previous revisions, HTML5 doesn't enforce a strict set of syntax rules. Updating a page can often be as easy as changing the document type declaration.

But what is HTML5? Originally, it referred to the latest revision of the HTML standard. Nowadays, it's harder to define; the term has gone to buzzword hell and is now used to describe many technologies that aren't part of the HTML5 specification. Even the W3C got caught up in the all-inclusiveness of HTML5. For a brief period, they defined it as including, for example, Cascading Style Sheets (CSS) and Scalable Vector Graphics (SVG). This only added to the confusion. Fortunately, the W3C backed away from that stance and went back to the original, stricter definition that refers only to the actual HTML5 specification. In a somewhat bolder move, the WHATWG simply dropped the numeral 5, renaming it simply HTML. This actually brings it much closer to reality, in the sense that specifications such as HTML are always evolving and never completely supported by any browser. In this book, I just use the term HTML for the most part. You can assume that any mention of HTML5 refers to the actual W3C specification called HTML5.

Using HTML5 for Games

Many features from the HTML5 specification have applications in game development, but one of the first features to gain widespread popularity was the canvas element. The visual nature of this element without a doubt helped it spread quickly when the first interactive animations and graphics effects started appearing. More advanced projects soon followed, giving the new standard a dose of good publicity and promising a future with a more dynamic and visually interesting web.

Canvas

Hobbyist game developers were also among the first to embrace HTML5, and for good reason. The canvas element provides web game developers with the ability to create dynamic graphics, giving them a welcome alternative to static images and animated GIFs.

Sure, people have created more or less ingenious (and/or crazy) solutions in lieu of better tools for creating dynamic graphics. Entire drawing libraries rely on nothing more than colored div elements—that may be clever, but that approach isn't sufficient for doing anything more than drawing a few simple shapes.

Uniform Resource Identifier (URI) schemes let you assign source files to img elements, for example, using a base64-encoded data string, either directly in the HTML or by setting the src or href property with JavaScript. One of the clever uses of this data URI scheme is to generate images on the fly and thus provide a dynamically animated image, which isn't a great solution for anything but small and simple images.

Wolf 5K, the winner of the 2002 The 5K contest, which challenged developers to create a website in just five kilobytes, used a somewhat similar technique. The game, a small 3D maze game, generated black and white images at runtime and fed them continuously to the image src property, relying on the fact that img elements can also take a JavaScript expression in place of an actual URL.

Graphics drawn on a canvas surface can't be declared with HTML markup; instead, they must be drawn with JavaScript using a simple Application Programming Interface (API). Listing 1-1 shows a basic example of how to draw a few simple shapes. Note that the full API provides much more functionality than the small portion shown in this example.

Listing 1-1 Drawing shapes with the canvas API

<canvas id="mycanvas"></canvas>
<script>
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext("2d");
 
    canvas.width = canvas.height = 200;
 
    // draw two blue circles
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
    ctx.arc(150, 50, 25, 0, Math.PI * 2, true);
    ctx.fill();
 
    // draw a red triangle
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(100, 75);
    ctx.lineTo(75, 125);
    ctx.lineTo(125, 125);
    ctx.fill();
 
    // draw a green semi-circle
    ctx.strokeStyle = "green";
    ctx.beginPath();
    ctx.scale(1, 0.5);
    ctx.arc(100, 300, 75, Math.PI, 0, true);
    ctx.closePath();
    ctx.stroke();
</script>

The code produces the drawing shown in Figure 1-1.

Figure 1-1: This simple canvas drawing was created with JavaScript.

I revisit the canvas element in Chapter 6 and explore it in detail when I use it to create game graphics and special effects.

Audio

The new audio element is just as welcome to a web game developers’ toolbox as the canvas element. Finally, you have native audio capabilities in the browser without resorting to plug-ins. Not too long ago, if a website had audio, some form of Flash was involved. Libraries like the SoundManager 2 project (www.schillmania.com/projects/soundmanager2) provide full JavaScript access to most of the audio features of Flash. But even if such a bridge allows your own code to stay on the JavaScript side, your users still need to install the plug-in. The HTML5 audio element solves this problem, making access to audio available in browsers out of the box using only plain old HTML and JavaScript.

The audio element still has a few unresolved issues, however. The major browser vendors all seem to agree on the importance of the element and have all adopted the specification, but so far they've failed to agree on which audio codecs should be supported. So, while the theory of the audio element is good, reality has left developers with no other option than to provide audio files in multiple formats to appease all the browser vendors.

The audio element can be defined in the mark-up or created dynamically with JavaScript. (The latter option is of more interest to you as an application and game developer.) Listing 1-2 shows a basic music player with multiple source files, native user interface (UI) controls, and a few keyboard hotkeys that use the JavaScript API.

Listing 1-2 A simple music player with HTML5 audio

<audio...