HTML5 Games

Creating Fun with HTML5, CSS3 and WebGL

Jacob Seidelin

• Publisher: Wiley
• Year: 2014
• ISBN:
  9781118855454
• Edition: 2
• Topic: Computer Science
• Subtopic: Programming in HTML
• Index: Computer Science

HTML5 Games shows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

Topics include:

• Dealing with backwards compatibility
• Generating level data
• Making iOS and Android web apps
• Taking your game offline
• Using Web Workers
• Persistent Game Data
• Drawing with Canvas
• Capturing player input
• Creating 3D graphics with WebGL
• Textures and lighting
• Sound with HTML5 Audio

And more…

Part I

Getting Started with HTML5 Games

• Chapter 1 Gaming on the Web
• Chapter 2 Taking the First Steps
• Chapter 3 Going Mobile

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.P...