Chapter 1, Introducing HTML5 Games, introduces the new features of HTML5, CSS3, and the related JavaScript API. It demonstrates what games we can make with these features and their benefits.

Chapter 2, Getting Started with DOM-based Game Development, kickstarts the game development journey by creating a traditional Ping Pong game in DOM and jQuery.

Chapter 3, Building a Card-matching Game in CSS3, walks you through the new features of CSS3 and discusses how we can create a memory card-matching game in DOM and CSS3.

Chapter 4, Building the Untangle Game with Canvas and the Drawing API, introduces a new way to draw things and interact with them in a web page with the new canvas element. This also demonstrates how to handle dragging on touch devices.

Chapter 5, Building a Canvas Game's Masterclass, extends the Untangle game to show how we can draw gradients and images in the Canvas. It also discusses sprite sheet animations and multilayer management.

Chapter 6, Adding Sound Effects to Your Games, adds sound effects and background music to the game by using the Audio element. It discusses the audio format capability among web browsers and creates a keyboard-driven music game by the end of the chapter.

Chapter 7, Saving the Game's Progress, extends the CSS3 memory-matching game to demonstrate how we can use the Local Storage API to store and resume game progress and records the best scores.

Chapter 8, Building a Multiplayer Draw-and-Guess Game with WebSockets, discusses the WebSockets API that allows browsers to establish persistent connection with the socket server. This allows multiple players to play the game together in real time. A draw-and-guess game is created at the end of the chapter.

Chapter 9, Building a Physics Car Game with Box2D and Canvas, teaches you how to integrate a famous physics engine, Box2D, into our canvas games. It discusses how to create physics bodies, apply force, connect them together, associate graphics with the physics, and finally create a platform car game.

Chapter 10, Deploying HTML5 Games, shares the different ways in which we can publish our games. It discusses wrapping the web into a native app for Apple's App Store.

Appendix, Pop Quiz Answers, gives the answers to the pop quiz questions in each of the chapters.

You need the latest modern web browsers, a good text editor, and a basic knowledge of HTML, CSS, and JavaScript. In Chapter 8, Building a Multiplayer Draw-and-Guess Game with WebSockets, we need the Node.js server, which we will help you to install in that chapter.

This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.

In this book, you will find several headings that appear frequently (Time for action, What just happened?, Pop quiz, and Have a go hero).

To give clear instructions on how to complete a procedure or task, we use these sections as follows:

Instructions often need some extra explanation to ensure they make sense, so they are followed with these sections:

You will also find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Open the index.html file in the code editor."

A block of code is set as follows:

var matchingGame = {};
matchingGame.deck = [
  'cardAK', 'cardAK',
  'cardAQ', 'cardAQ',
  'cardAJ', 'cardAJ',
  'cardBK', 'cardBK',
  'cardBQ', 'cardBQ',
  'cardBJ', 'cardBJ',
];

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

$(function(){
  matchingGame.deck.sort(shuffle);

  for(var i=0;i<11;i++){
    $(".card:first-child").clone().appendTo("#cards");
  }

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "In MAC, click on the Get the code tab and you will see the following screenshot; this shows a guide on how to embed this font into our web page."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.