HTML5 Games Development by Example Beginner's Guide -- Table of Contents -- HTML5 Games Development by Example Beginner's Guide -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Time for action - heading -- What just happened? -- Pop quiz - heading -- Have a go hero - heading -- Reader feedback -- Customer support -- Downloading the example code for this book -- Errata -- Piracy -- Questions -- 1. Introducing HTML5 Games -- Discovering new features in HTML5 -- Canvas -- Audio -- GeoLocation -- WebGL -- WebSocket -- Local Storage -- Offline application -- Discovering new features in CSS3 -- CSS3 transition -- CSS3 transform -- CSS3 animation -- Learning more detail of new HTML5 and CSS3 features -- The benefit of creating HTML5 games -- No third-party plugin required -- Supporting iOS devices without plugin -- Breaking the boundary of usual browser games -- Building HTML5 games -- What others are playing with HTML5 -- Matching game -- Sinuous -- Asteroid-styled bookmarklet -- Quake 2 -- RumpeTroll -- Scrabb.ly -- Aves Engine -- Browsing more HTML5 games -- What we are going to create in this book -- Summary -- 2. Getting Started with DOM-based Game Development -- Preparing the development environment -- Preparing the HTML documents for a DOM-based game -- Time for action - Installing the jQuery library -- What just happened? -- New HTML5 doctype -- Header and footer -- Best practice to place the JavaScript code -- Running our code after the page is ready -- Pop quiz -- Setting up the Ping Pong game elements -- Time for action - Placing Ping Pong game elements in DOM -- What just happened?.

Introducing jQuery -- Understanding basic jQuery selectors -- Understanding the jQuery CSS function -- Benefits of using jQuery -- Manipulating game elements in DOM with jQuery -- Time for action - Changing position of elements with jQuery -- What just happened? -- Understanding the behavior of absolute position -- Pop quiz -- Getting a keyboard input from players -- Time for action - Moving DOM objects by a keyboard input -- What just happened? -- Understanding a key code -- Making constants more readable -- Converting strings to numbers with parseInt function -- Executing JavaScript expressions directly in the Console panel -- Have a go hero -- Checking the console window -- Supporting multiple keyboard input from players -- Time for action - Listening to keyboard input with another approach -- What just happened? -- Declaring global variables in a better way -- Creating a JavaScript timer with setInterval function -- Understanding Game Loop -- Moving a DOM object with JavaScript Interval -- Time for action - Moving the ball with JavaScript Interval -- What just happened? -- Beginning collision detection -- Time for action - Hitting the ball with the paddles -- What just happened? -- Have a go hero -- Showing text dynamically in HTML -- Time for action - Showing the score of both players -- What just happened? -- Have a go hero - Winning the game -- Summary -- 3. Building a Memory Matching Game in CSS3 -- Moving game objects with CSS3 transition -- Time for action - Moving a playing card around -- What just happened? -- 2D transforms functions -- 3D transforms functions -- Tweening the styles by using CSS3 transition -- Have a go hero -- Creating a card-flipping effect -- Time for action - Flipping a card with CSS3 -- What just happened? -- Toggling class with jQuery toggleClass function.

Controlling the visibility of overlapped elements by z-index -- Introducing CSS perspective property -- Have a go hero -- Introducing backface-visibility -- Creating a card matching memory game -- Downloading the sprites sheet of playing cards -- Setting up the game environment -- Time for action - Preparing the card matching game -- What just happened? -- Cloning DOM elements with jQuery -- Selecting the first child of an element in jQuery by using child filters -- Vertically aligning a DOM element -- Using CSS sprite with a background position -- Adding game logic to the matching game -- Time for action - Adding game logic to the matching game -- What just happened? -- Executing code after CSS transition ended -- Delaying code execution on flipping cards -- Randomizing an array in JavaScript -- Storing internal custom data with an HTML5 custom data attribute -- Pop quiz -- Accessing custom data attribute with jQuery -- Pop quiz -- Have a go hero -- Making other playing card games -- Have a go hero -- Embedding web fonts into our game -- Time for action - Embedding a font from Google Font Directory -- What just happened? -- Choosing different font delivery services -- Summary -- 4. Building the Untangle Game with Canvas and Drawing API -- Introducing the HTML5 Canvas Element -- Drawing a circle in canvas -- Time for action - Drawing color circles on canvas -- What just happened? -- Putting fallback content when the web browser does not support canvas -- Drawing circles and shapes with canvas arc function -- Converting degree to radians -- Time for action - Drawing different arcs with arc function -- What just happened? -- Pop quiz -- Executing the path drawing in canvas -- Beginning a path for each style -- Have a go hero -- Closing a path -- Pop quiz -- Wrapping the circle drawing in function.

Time for action - Putting the circle drawing code into a function -- What just happened? -- Generating random numbers in JavaScript -- Saving the circle position -- Time for action - Saving the circle position -- What just happened? -- Defining a basic class definition in JavaScript -- Have a go hero -- Drawing lines in canvas -- Time for action - Drawing straight lines between each circle -- What just happened? -- Introducing the line drawing API -- Interacting with drawn objects in canvas with mouse events -- Time for action - Dragging the circles in canvas -- What just happened? -- Getting the mouse position in the canvas element -- Detecting mouse events on circles in canvas -- Pop quiz -- Game loop -- Clearing the canvas -- Pop quiz -- Detecting line intersection in canvas -- Time for action - Distinguishing the intersected lines -- What just happened? -- Determining whether two line segments intersect -- Making the untangle puzzle game -- Time for action - Making the untangle puzzle game in canvas -- What just happened? -- Defining the leveling data -- Determining level-up -- Displaying current level and completeness progress -- Have a go hero -- Summary -- 5. Building a Canvas Games Masterclass -- Filling shapes with gradient color -- Time for action - Drawing a gradient color background to the Untangle game -- What just happened? -- Adding color stops in the gradient color -- Filling radial gradient color -- Time for action - Filling the circles with radial gradient color -- What just happened? -- Have a go hero - Filling gradients -- Drawing text in canvas -- Time for action - Displaying the progress level text inside the canvas element -- What just happened? -- Pop quiz - Drawing text in canvas -- Using embedded web font inside canvas -- Time for action - Embedding Google Web Font into the canvas element -- What just happened?.

Drawing images in canvas -- Time for action - Adding graphics to the game -- What just happened? -- Have a go hero -- Using the drawImage function -- Have a go hero - Optimizing the background image -- Decorating the canvas-based game -- Time for action - Adding CSS styles and images decoration to the game -- What just happened? -- Pop quiz - Styling a canvas background -- Animating a sprite sheet in canvas -- Time for action - Making a game guide animation -- What just happened? -- Creating a multi-layers canvas game -- Time for action - Dividing the game into four layers -- What just happened? -- Mixing CSS technique with Canvas drawing -- Have a go hero -- Summary -- 6. Adding Sound Effects to your Games -- Adding a sound effect to the play button -- Time for action - Adding sound effects to the play button -- What just happened? -- Defining an audio element -- Playing a sound -- Pausing a sound -- Adjusting the sound volume -- Using the jQuery hover event -- Creating the Ogg format audio to support Mozilla Firefox -- Time for action - Converting an MP3 sound to Ogg format with Audacity -- What just happened? -- Supporting different web browsers with different audio formats -- Pop quiz - Using the audio tag -- Building a mini piano musical game -- Time for action - Creating a basic background to the music game -- What just happened? -- Creating scenes in HTML5 games -- Visualizing the music play back -- Time for action - Creating the playback visualization in the music game -- What just happened? -- Choosing the right song for the music game -- Storing and extracting the song level data -- Getting the elapsed time of the game -- Creating music dots -- Moving the music dots -- Linking the play button to the music game scene -- Time for action - Animating the scene transition -- What just happened? -- Creating a slide-in effect in CSS3.

Have a go hero - Creating different scene transition effects.