Index

A

• AAC format
  • about / File format for WebAudio
• Ahh
  • URL / Coca-Cola's Ahh campaign
• alphabet baseline
  • about / What just happened?
• Amazon CloudFront
  • about / Putting the game on the Web
• Amazon S3
  • about / Putting the game on the Web
• animations
  • about / Time for action – making a game guide animation
• anonymous function
  • about / Running jQuery inside a scope
• AppCache file
  • about / The AppCache file
• Apple Safari
  • URL / Preparing the development environment
• ApplyForce function
  • versus ApplyImpulse function / Understanding the difference between ApplyForce and ApplyImpulse
• ApplyImpulse function
  • versus ApplyForce function / Understanding the difference between ApplyForce and ApplyImpulse
• app store
  • reviewing process / App store's reviewing process
• arc function
  • used, for drawing circles / Drawing circles and shapes with the Canvas arc function
  • used, for drawing shapes / Drawing circles and shapes with the Canvas arc function
  • arguments / Drawing circles and shapes with the Canvas arc function
• arguments, arc function
  • X / Drawing circles and shapes with the Canvas arc function
  • Y / Drawing circles and shapes with the Canvas arc function
  • radius / Drawing circles and shapes with the Canvas arc function
  • startAngle / Drawing circles and shapes with the Canvas arc function
  • endAngle / Drawing circles and shapes with the Canvas arc function
  • counter-clockwise / Drawing circles and shapes with the Canvas arc function
• arguments, clearRect function
  • x / Clearing the Canvas
  • y / Clearing the Canvas
  • width / Clearing the Canvas
  • height / Clearing the Canvas
• arguments, hover function
  • handlerIn / Using the jQuery hover event
  • handlerOut / Using the jQuery hover event
• arguments, setItem function
  • key / Storing and loading data with local storage
  • value / Storing and loading data with local storage
• arguments, splice function
  • index / Removing an element in an array with the given index
  • length / Removing an element in an array with the given index
  • element1, element2, … elementN / Removing an element in an array with the given index
• arguments, transition property
  • property_name / Tweening the styles using CSS3 transition
  • duration / Tweening the styles using CSS3 transition
  • timing_function / Tweening the styles using CSS3 transition
  • delay / Tweening the styles using CSS3 transition
• array
  • randomizing, in JavaScript / Randomizing an array in JavaScript
  • cloning, in JavaScript / Cloning an array in JavaScript
• associative array
  • local storage object, treating as / Treating the local storage object as an associative array
• Asteroid-styled bookmarklet
  • about / Asteroid-styled bookmarklet
  • URL, for installation / Asteroid-styled bookmarklet
• AT-AT Walker
  • URL / CSS3 animation
• attributes, audio element
  • src / Defining an audio element
  • autoplay / Defining an audio element
  • loop / Defining an audio element
  • preload / Defining an audio element
  • controls / Defining an audio element
• audio
  • about / Audio
• audio element
  • defining / Defining an audio element
  • attributes / Defining an audio element
  • sound volume, adjusting of / Adjusting the sound volume
• audio event
  • handling, in playback complete events / Handling the audio event in playback complete events, What just happened?
• audio events
  • handling / Handling audio events
  • ended / Handling audio events
  • play / Handling audio events
  • pause / Handling audio events
  • progress / Handling audio events
  • timeupdate / Handling audio events
  • reference link / Handling audio events
• AudioJS
  • URL / Have a go hero

B

• b2World class
  • used, for creating Box2D environment / Using b2World to create a new world
• backface-visibility property
  • about / Introducing backface-visibility
• background image
  • optimizing / Have a go hero – optimizing the background image
• background position
  • CSS sprite, creating with / Using CSS sprite with a background position
• ball
  • moving, with JavaScript Interval / Time for action – Moving the ball with JavaScript Interval, What just happened?
  • hitting, with paddles / Time for action – hitting the ball with the paddles, What just happened?
• basic background
  • creating, for mini piano musical game / Time for action – creating a basic background for the music game, What just happened?
• basic class definition
  • defining, in JavaScript / Defining a basic class definition in JavaScript
• basic jQuery selectors
  • about / Understanding basic jQuery selectors
• bit flags, debug drawings
  • e_aabbBit / What just happened?
  • e_centerOfMassBit / What just happened?
  • e_controllerBit / What just happened?
  • e_jointBit / What just happened?
  • e_pairBit / What just happened?
  • e_shapeBit / What just happened?
• body
  • force, applying to / Applying force to a body
• bottom baseline
  • about / What just happened?
• Box2D environment
  • b2World class, used for creating / Using b2World to create a new world
  • gravity, defining / Setting the gravity of the world
  • setting / Setting Box2D to ignore the sleeping object
• Box2D JavaScript library
  • installing / Installing the Box2D JavaScript library, Time for action – installing the Box2D physics library
• Box2D outline drawing
  • replacing, with graphics / Replacing the Box2D outline drawing with graphics, Time for action – adding a flag graphic and a car graphic to the game
• Box2DWeb-Fork
  • reference link / Installing the Box2D JavaScript library
• Box2D world
  • collisions, checking in / Checking collisions in the Box2D world, Time for action – checking a collision between the car and the destination body, What just happened?
• browser
  • game scores, saving in / Time for action – saving the game score
• browser selector
  • versus query selector / jQuery's selector versus browser selector
• Buzz
  • URL / Have a go hero

C

• canvas
  • physics world, drawing in / Drawing the physics world in the canvas, Time for action – drawing the physics world into the Canvas
  • image, rotating in / Rotating and translating an image in the canvas
  • image, translating in / Rotating and translating an image in the canvas
• Canvas
  • about / Canvas
  • circle, drawing in / Drawing a circle in the Canvas
  • color circles, drawing in / Time for action – drawing color circles in the Canvas, What just happened?
  • path drawing, executing in / Executing the path drawing in the Canvas
  • lines, drawing in / Drawing lines in the Canvas
  • circles, dragging in / Time for action – dragging the circles in the Canvas, What just happened?
  • mouse events, detecting in circles / Detecting mouse events in circles in the Canvas
  • clearing / Clearing the Canvas
  • line intersection, detecting in / Detecting line intersection in the Canvas
  • Untangle puzzle game, creating in / Making the Untangle puzzle game, Time for action – making the Untangle puzzle game in Canvas, What just happened?
  • text, drawing in / Drawing text in the Canvas
  • embedded web font, using inside / Using embedded web font inside the Canvas
  • images, drawing in / Drawing images in the Canvas
  • sprite sheet, animating in / Animating a sprite sheet in Canvas
  • shared drawing whiteboard, creating with / Making a shared drawing whiteboard with Canvas and WebSockets
  • local drawing sketchpad, building with / Time for action – making a local drawing whiteboard with the Canvas, What just happened?
• Canvas-based game
  • decorating / Decorating the Canvas-based game
  • CSS styles, adding / Time for action – adding CSS styles and image decoration to the game, What just happened?
  • image decoration, adding / Time for action – adding CSS styles and image decoration to the game, What just happened?
• Canvas drawing
  • CSS technique, mixing with / Mixing a CSS technique with Canvas drawing
• canvas element
  • about / Introducing the HTML5 canvas element
  • Google Web Font, embedding into / Time for action – embedding a Google web font into the canvas element, What just happened?
  • default background / What just happened?
• canvas rendering context
  • about / The Canvas context
• car
  • force, adding to / Adding force to the car with a keyboard input, What just happened?
• card
  • flipping, with CSS3 / Time for action – flipping a card with CSS3
• card-flipping effect
  • creating / Creating a card-flipping effect
• card-matching game
  • preparing / Time for action – preparing the card-matching game, What just happened?
• card-matching memory game
  • creating / Creating a card-matching memory game
  • environment, setting up / Setting up the game environment
• car game
  • wheels, adding to / Adding wheels to the game, Time for action – putting two circles in the world, What just happened?
  • level support, adding to / Adding a level support to our car game, Time for action – loading the game with levels data, What just happened?
  • enhancing / Adding a final touch to make the game fun to play, Time for action – decorating the game and adding a fuel limitation, What just happened?
  • constraint, adding / Adding fuel to add a constraint when applying force
  • remaining fuel, presenting in CSS3 progress bar / Presenting the remaining fuel in a CSS3 progress bar
  • viewport scale, controlling / Controlling the viewport scale
  • touch-specific buttons / Touch-specific buttons
• CDN version
  • about / Choosing the jQuery file
  • URL / Choosing the jQuery file
• chatting application, building with WebSockets
  • about / Building a chatting application with WebSockets
  • message, sending to server / Sending a message to the server, Time for action – sending a message to the server through WebSockets, What just happened?
  • message, sending from client to server / Sending a message from the client to the server
  • message, receiving on server side / Receiving a message on the server side
• child-related selectors
  • reference link / Selecting the first child of an element in jQuery using child filters
• child filter
  • about / Selecting the first child of an element in jQuery using child filters
• circle
  • drawing, in Canvas / Drawing a circle in the Canvas
  • straight lines, drawing between / Time for action – drawing straight lines between each circle
• circle drawing
  • wrapping, in function / Wrapping the circle drawing in a function
• circle drawing code
  • inserting, into function / Time for action – putting the circle drawing code into a function, What just happened?
• circle position
  • saving / Saving the circle position, Time for action – saving the circle position, What just happened?
• circles
  • drawing, arc function used / Drawing circles and shapes with the Canvas arc function
  • dragging, in Canvas / Time for action – dragging the circles in the Canvas, What just happened?
  • mouse events, detecting in / Detecting mouse events in circles in the Canvas
• class
  • defining / Defining class and instant instance methods
• clearRect function
  • arguments / Clearing the Canvas
• client
  • messages, sending to / Sending messages to the client
• client events, WebSocket
  • onopen / WebSocket client events
  • onmessage / WebSocket client events
  • onclose / WebSocket client events
  • onerror / WebSocket client events
• closePath function
  • used, for closing path / Closing a path
• CocoonJS
  • URL / Native app-rendering performance in particular scenarios, Building with the PhoneGap build
• code
  • executing, after completing CSS transition / Executing code after the CSS transition has ended
  • dividing, into files / Dividing code into files
• code execution
  • delaying, on flipping cards / Delaying code execution on flipping cards
• collision contact list
  • obtaining / Getting the collision contact list
• collision detection
  • about / Beginning collision detection
• collisions
  • checking, in Box2D world / Checking collisions in the Box2D world, Time for action – checking a collision between the car and the destination body, What just happened?
• color circles
  • drawing, in Canvas / Time for action – drawing color circles in the Canvas, What just happened?
• connected browsers
  • message, sending to / Sending a message to all connected browsers, Time for action – sending total count to all users, What just happened?
  • messages, sending to / Time for action – sending messages to all connected browsers, What just happened?
  • drawing, sending to / Sending the drawing to all the connected browsers
• connection count
  • displaying, in WebSocket application / Time for action – showing the connection count in a WebSocket application, What just happened?
• console window
  • checking / Checking the console window
  • local storage, inspecting in / Inspecting the local storage in a console window
• coordinate
  • about / Understanding the behavior of absolute position
• CSS
  • perspective property / Introducing CSS' perspective property
• CSS3
  • new features / Discovering new features in CSS3, CSS3 transition, CSS3 transform
  • modules / Tweening the styles using CSS3 transition
  • card, flipping with / Time for action – flipping a card with CSS3
  • ribbon effect, creating in / Time for action – creating a ribbon in CSS3, What just happened?
• CSS3 animation
  • about / CSS3 animation
• CSS3 cube
  • reference link / Have a go hero
• CSS3 flexible box layout module
  • about / Vertically aligning a DOM element
  • references / Vertically aligning a DOM element
• CSS3 transform
  • about / CSS3 transform
• CSS3 transition
  • about / CSS3 transition, Tweening the styles using CSS3 transition
  • game objects, moving with / Moving game objects with CSS3 transition
  • used, for tweening styles / Tweening the styles using CSS3 transition
• CSS3 trick
  • reference link / Vertically aligning a DOM element
• CSS 3D transforms
  • reference link / Introducing backface-visibility
• CSS sprite
  • using, with background position / Using CSS sprite with a background position
• CSS sprite sheet
  • reference link / Downloading the sprite sheet of playing cards
• CSS technique
  • mixing, with Canvas drawing / Mixing a CSS technique with Canvas drawing
• CSS transform
  • about / What just happened?
• current date, and time
  • obtaining, in JavaScript / Getting the current date and time in JavaScript
• Cursors.io
  • URL / Cursors.io
  • about / Cursors.io
• custom data attribute
  • about / Creating a card-matching memory game, Storing internal custom data with an HTML5 custom data attribute, What just happened?
  • accessing, with jQuery / Accessing custom data attribute with jQuery

D

• 2D transforms functions
  • rotate / 2D transform functions
  • about / 2D transform functions
  • translate / 2D transform functions
  • scale / 2D transform functions
• 3D transforms functions
  • about / 3D transform functions
  • translate3d / 3D transform functions
  • scale3d / 3D transform functions
• data
  • storing, HTML5 local storage used / Storing data using HTML5 local storage, Storing and loading data with local storage
  • loading, HTML5 local storage used / Storing and loading data with local storage
• data logic, and view logic
  • separating / Separating the data and the view logic
• Date object
  • functions / Getting the current date and time in JavaScript
  • reference link / Getting the current date and time in JavaScript
• default background, canvas element / What just happened?
• degrees
  • converting, to radians / Converting degrees to radians
• deploying materials
  • preparing / Preparing the deploying materials
• Developers Tools
  • about / Checking the console window
• development environment
  • preparing / Preparing the development environment
• DOCTYPE tag
  • about / New HTML5 doctype
• DOM
  • Ping Pong game elements, placing in / Time for action – placing Ping Pong game elements in the DOM, What just happened?
• DOM-based game
  • HTML documents, preparing for / Preparing the HTML documents for a DOM-based game
• DOM elements
  • cloning, with jQuery / Cloning DOM elements with jQuery
  • aligning, vertically / Vertically aligning a DOM element
• DOM node
  • behavior of absolute position / Understanding the behavior of absolute position
• DOM object
  • moving, with JavaScript Interval / Moving a DOM object with JavaScript Interval
• DOM objects
  • moving, by mouse input / Time for action – moving DOM objects by mouse input
• draggable / Using mouse events to interact with objects drawn in the Canvas
• drawImage function
  • image, drawing in Canvas / Using the drawImage function
• drawImage function, arguments
  • image / Using the drawImage function
  • x / Using the drawImage function
  • y / Using the drawImage function
  • width / Using the drawImage function
  • height / Using the drawImage function
  • sx / Using the drawImage function
  • sy / Using the drawImage function
  • sWidth / Using the drawImage function
  • sHeight / Using the drawImage function
  • dx / Using the drawImage function
  • dy / Using the drawImage function
• drawing
  • sending, to connected browsers / Sending the drawing to all the connected browsers
  • sending, through WebSockets / Time for action – sending the drawing through WebSockets
• drawing context properties
  • context.font / What just happened?
  • context.textAlign / What just happened?
  • context.textBaseline / What just happened?
• drawing lines
  • recreating, after receiving from clients / Recreating the drawing lines after receiving them from other clients
• drawing lines data
  • packing, into JSON / Packing the drawing lines data into JSON for sending
• dynamic box
  • creating, in physics world / Creating a dynamic box in the physics world, Time for action – putting a dynamic box in the world, What just happened?

E

• EaselJS
  • URL / WebGL
• Ejecta
  • URL / Native app-rendering performance in particular scenarios
• elapsed played time
  • game over dialog, creating with / Time for action – creating a game over dialog with the elapsed played time, What just happened?
• elapsed time
  • calculating / Counting time
• embedded web font
  • using, inside Canvas / Using embedded web font inside the Canvas
• entire game progress
  • saving, in local storage / Saving the entire game progress, Time for action – saving all essential game data in the local storage, What just happened?

F

• fallback content
  • about / Putting in fallback content when the web browser does not support the Canvas
• features, CSS3
  • about / Discovering new features in CSS3
  • CSS3 transition / CSS3 transition
  • CSS3 transform / CSS3 transform
  • CSS3 animation / CSS3 animation
• file format, WebAudio
  • AAC / File format for WebAudio
  • Ogg / File format for WebAudio
  • WAV / File format for WebAudio
• files
  • code, dividing into / Dividing code into files
• fill function
  • about / Beginning a path for each style
• fillText function, arguments
  • String / What just happened?
  • X / What just happened?
  • Y / What just happened?
• flipping cards
  • code execution, delaying on / Delaying code execution on flipping cards
• font
  • embedding, from Google Fonts directory / Time for action – embedding a font from the Google Fonts directory, What just happened?
• Fontdeck
  • URL / Choosing different font delivery services
• font delivery services
  • selecting / Choosing different font delivery services
• footer
  • about / Header and footer
• force
  • adding, to car / Adding force to the car with a keyboard input, What just happened?
  • applying, to body / Applying force to a body
  • clearing / Clearing Force
• function
  • circle drawing, wrapping in / Wrapping the circle drawing in a function
  • circle drawing code, inserting into / Time for action – putting the circle drawing code into a function, What just happened?
• functions, Date object
  • getFullYear / Getting the current date and time in JavaScript
  • getMonth / Getting the current date and time in JavaScript
  • getDate / Getting the current date and time in JavaScript
  • getDay / Getting the current date and time in JavaScript
  • getHours / Getting the current date and time in JavaScript
  • getMinutes / Getting the current date and time in JavaScript
  • getSeconds / Getting the current date and time in JavaScript
  • getMilliseconds / Getting the current date and time in JavaScript
  • getTime / Getting the current date and time in JavaScript
• function type, data function
  • .data(key) / Accessing custom data attribute with jQuery
  • .data(key, value) / Accessing custom data attribute with jQuery

G

• game
  • web fonts, embedding into / Embedding web fonts into our game
  • caching, for offline access / Caching the game for offline access, Time for action – adding the AppCache Manifest
  • restarting / Restarting the game, Time for action – restarting the game while pressing the R key
  • putting, on Web / Putting the game on the Web
• game environment
  • ramps, adding to / Adding ramps to our game environment, Time for action – creating the world with ramps
• game flow
  • controlling, of multiplayer draw-and-guess game / Controlling the game flow of a multiplayer game
• game guide animation
  • creating / Time for action – making a game guide animation, What just happened?
• game logic
  • adding, to matching game / Adding game logic to the matching game, Time for action – adding game logic to the matching game, What just happened?
• game logic, adding to matching game
  • steps / Time for action – adding game logic to the matching game
• game loop
  • about / Game loop
• Game Loop
  • about / Understanding the game loop
• game objects
  • moving, with CSS3 transition / Moving game objects with CSS3 transition
• game over dialog
  • creating / Creating a game over dialog
  • creating, with elapsed played time / Time for action – creating a game over dialog with the elapsed played time, What just happened?
• game progress
  • resuming, from local storage / Time for action – resuming a game from the local storage, What just happened?
• games
  • reference link, for playing / What we are going to create in this book
• game scores
  • saving, in browser / Time for action – saving the game score
• general form
  • about / Determining whether two line segments intersect
• GeoLocation
  • about / GeoLocation
• Git
  • about / Putting the game on the Web
  • URL / Putting the game on the Web
• GitHub
  • about / Putting the game on the Web
  • URL / Putting the game on the Web
• global variables
  • about / Declaring global variables in a better way
  • declaring / Declaring global variables in a better way
• Google Chrome
  • URL / Preparing the development environment
• Google Fonts directory
  • about / Time for action – embedding a font from the Google Fonts directory
  • font, embedding from / Time for action – embedding a font from the Google Fonts directory, What just happened?
  • URL / Time for action – embedding a font from the Google Fonts directory
• Google Web Font
  • embedding, into canvas element / Time for action – embedding a Google web font into the canvas element, What just happened?
• graphics
  • adding, to Untangle puzzle game / Time for action – adding graphics to the game, What just happened?
  • Box2D outline drawing, replacing with / Replacing the Box2D outline drawing with graphics, Time for action – adding a flag graphic and a car graphic to the game
  • drawing, according to state of physics body / Drawing graphics in every frame according to the state of its physics body

H

• header
  • about / Header and footer
• hosted version / Choosing the jQuery file
• hover event
  • using / Using the jQuery hover event
• hover function
  • arguments / Using the jQuery hover event
• HTML
  • text, displaying in / Showing text dynamically in HTML
• HTML5
  • new features / Discovering new features in HTML5, GeoLocation, WebSocket
  • DOCTYPE tag / New HTML5 doctype
  • meta tag / New HTML5 doctype
• HTML5 custom data attribute
  • internal custom data, storing with / Storing internal custom data with an HTML5 custom data attribute
• HTML5 game
  • building, into Mac OS X app / Building an HTML5 game into a Mac OS X app, Time for action—putting the HTML5 games into a Mac app, What just happened?
• HTML5 games
  • benefits, of creating / The benefit of creating HTML5 games, Native app-rendering performance in particular scenarios
  • building / Building HTML5 games
  • URL / Putting the game on the Web
• HTML5 local storage
  • used, for storing data / Storing data using HTML5 local storage, Storing and loading data with local storage
  • used, for loading data / Storing and loading data with local storage
• HTML5, applications
  • about / What others are playing with HTML5
  • Coca-Cola's Ahh campaign / Coca-Cola's Ahh campaign
  • Asteroid-styled bookmarklet / Asteroid-styled bookmarklet
  • X-Type / X-Type
  • Cursors.io / Cursors.io
• HTML5Rocks
  • URL / The AppCache file
• HTML documents
  • preparing, for DOM-based game / Preparing the HTML documents for a DOM-based game
• HTTP requests
  • about / Downloading the sprite sheet of playing cards

I

• image
  • rotating, in canvas / Rotating and translating an image in the canvas
  • translating, in canvas / Rotating and translating an image in the canvas
• image assets
  • downloading / Downloading the image assets
• images
  • drawing, in Canvas / Drawing images in the Canvas
• Impact / X-Type
• IndexedDB
  • about / Inspecting the local storage in a console window
  • URL / Inspecting the local storage in a console window
• installing
  • Box2D JavaScript library / Installing the Box2D JavaScript library, Time for action – installing the Box2D physics library
• instant instance methods
  • defining / Defining class and instant instance methods
• Instant Sprite generator
  • reference link / Downloading the sprite sheet of playing cards
• internal custom data
  • storing, with HTML5 custom data attribute / Storing internal custom data with an HTML5 custom data attribute
• intersected lines
  • distinguishing / Time for action – distinguishing the intersected lines
• intersection point
  • about / What just happened?
• io.js
  • URL / What just happened?

J

• JavaScript
  • array, randomizing in / Randomizing an array in JavaScript
  • random numbers, generating in / Generating random numbers in JavaScript
  • basic class definition, defining in / Defining a basic class definition in JavaScript
  • current date and time, obtaining in / Getting the current date and time in JavaScript
  • array, cloning in / Cloning an array in JavaScript
• JavaScript code
  • best practice / The best practice to place the JavaScript code
• JavaScript Interval
  • DOM object, moving with / Moving a DOM object with JavaScript Interval
  • ball, moving with / Time for action – Moving the ball with JavaScript Interval, What just happened?
• JavaScript library
  • about / Time for action – installing the jQuery library
• JavaScript timer
  • creating, with setInterval function / Creating a JavaScript timer with the setInterval function
• joint
  • about / Creating a physical car
• jQuery
  • about / Time for action – installing the jQuery library
  • URL / Time for action – installing the jQuery library
  • running, inside scope / Running jQuery inside a scope
  • using / Using jQuery
  • Ping Pong game elements, manipulating with / Manipulating game elements in DOM with jQuery
  • DOM elements, cloning with / Cloning DOM elements with jQuery
  • first child of element, selecting with child filters / Selecting the first child of an element in jQuery using child filters
  • custom data attribute, accessing with / Accessing custom data attribute with jQuery
• jQuery CSS function
  • about / Understanding the jQuery CSS function
• jQuery file
  • selecting / Choosing the jQuery file
• jQuery library
  • installing / Time for action – installing the jQuery library
• JSON
  • about / Using the native JSON to encode an object into a string, Loading a stored object from a JSON string
  • drawing lines data, packing into / Packing the drawing lines data into JSON for sending
• JSON string
  • stored object, loading into / Loading a stored object from a JSON string

K

• keyboard-driven mini piano musical game
  • creating / Creating a keyboard-driven mini piano musical game, Time for action – creating a mini piano musical game
  • three music lines, hitting by key down / Hitting the three music lines by key down
  • music dot hits, determining on key down / Determining music dot hits on key down
  • element, removing in array / Removing an element in an array with the given index
• keyboard input
  • used, for adding force to car / Adding force to the car with a keyboard input, What just happened?

L

• layers
  • about / Creating scenes in games
• left paddle
  • auto moving / Time for action – auto moving the left paddle
• left paddle movement
  • controlling / Controlling the left paddle movement
• level property
  • circles / Defining the leveling data
  • relationships / Defining the leveling data
• level support
  • adding, to car game / Adding a level support to our car game, Time for action – loading the game with levels data, What just happened?
• license, fonts
  • reference link / What just happened?
• line drawing API
  • about / Introducing the line drawing API
• line drawing functions
  • moveTo / Introducing the line drawing API
  • lineTo / Introducing the line drawing API
  • lineWidth / Introducing the line drawing API
  • stroke / Introducing the line drawing API
• line intersection
  • detecting, in Canvas / Detecting line intersection in the Canvas
  • about / What just happened?
  • determining / Determining whether two line segments intersect
• lines
  • drawing, in Canvas / Drawing lines in the Canvas
• line segment
  • about / Determining whether two line segments intersect
• link list / Getting the collision contact list
• local drawing sketchpad
  • building, with Canvas / Building a local drawing sketchpad, Time for action – making a local drawing whiteboard with the Canvas, What just happened?
• Local Storage
  • about / Local storage
• local storage
  • string value, storing / The local storage saves the string value
  • size limitations / The local storage saves the string value
  • objects, saving in / Saving objects in the local storage, Time for action – saving the time alongside the score, What just happened?
  • inspecting, in console window / Inspecting the local storage in a console window
  • entire game data, saving in / Saving the entire game progress, Time for action – saving all essential game data in the local storage, What just happened?
  • record, removing from / Removing a record from the local storage
  • game progress, resuming from / Time for action – resuming a game from the local storage, What just happened?
• local storage object
  • treating, as associative array / Treating the local storage object as an associative array
• local variable
  • about / Declaring global variables in a better way
• long polling
  • about / Comparing WebSockets with polling approaches

M

• Mac OS X app
  • HTML5 game, building into / Building an HTML5 game into a Mac OS X app, Time for action—putting the HTML5 games into a Mac app, What just happened?
• matching game
  • game logic, adding to / Adding game logic to the matching game, Time for action – adding game logic to the matching game, What just happened?
• measureText function
  • reference link / What just happened?
• message
  • sending, to connected browsers / Sending a message to all connected browsers, Time for action – sending total count to all users, What just happened?
• messages
  • sending, to client / Sending messages to the client
  • sending, to connected browsers / Time for action – sending messages to all connected browsers, What just happened?
• meta tag
  • about / New HTML5 doctype
  • adding, for mobile web app / Time for action – adding a meta tag for a mobile web app
• mini piano musical game
  • building / Building a mini piano musical game
  • basic background, creating for / Time for action – creating a basic background for the music game, What just happened?
  • scenes, creating in / Creating scenes in games
  • slide-in effect, creating in CSS3 / Creating a slide-in effect in CSS3, Have a go hero – creating different scene transition effects
  • music playback, visualizing / Visualizing the music playback, Time for action – creating the playback visualization in the music game, What just happened?
  • right song, selecting for / Choosing the right song for the music game
  • audio, playing on mobile devices / Playing audio on mobile devices
  • song level data, extracting / Storing and extracting the song-level data
  • song level data, storing / Storing and extracting the song-level data
  • elapsed time, obtaining of / Getting the elapsed time of the game
  • music dots, creating / Creating music dots
  • music dots, moving / Moving the music dots
  • additional features, adding / Adding additional features to the mini piano game
  • music volume, adjusting according to player / Adjusting the music volume according to the player
  • missed melody notes, removing / Time for action – removing missed melody notes, What just happened?
  • dots, removing from / Removing dots from the game
  • success count, storing in last five results / Storing the success count in the last five results
  • music notes, recording as level data / Recording music notes as level data, Time for action – adding functionalities to record the music level data, What just happened?
  • touch support, adding / Adding touch support
  • game over event, indicating in console / Time for action – indicating a game over event in the console, What just happened?
• mobile web app
  • meta tag, adding for / Time for action – adding a meta tag for a mobile web app
• modification
  • about / Using jQuery
• modules
  • exporting / Exporting modules
• modulus operator
  • about / What just happened?
• mouse event
  • obtaining / Getting the mouse event
• mouse events
  • used, for interacting with objects / Using mouse events to interact with objects drawn in the Canvas
  • detecting, in circles / Detecting mouse events in circles in the Canvas
• mouse input
  • obtaining / Getting mouse input
  • DOM objects, moving by / Time for action – moving DOM objects by mouse input
• mousemove event
  • about / Mouse move and Touch move
• Mozilla Firefox
  • URL / Preparing the development environment
• MP3 license
  • reference link / File format for WebAudio
• multi-layer Canvas game
  • creating / Creating a multilayer Canvas game, Time for action – dividing the game into four layers, What just happened?
• multiplayer draw-and-guess game
  • building / Building a multiplayer draw-and-guess game, Time for action – building the draw-and-guess game, What just happened?
  • Room class, inheriting / Inheriting the Room class
  • game flow, controlling of / Controlling the game flow of a multiplayer game
  • Room, creating / Room and Game Room
  • Game Room, creating / Room and Game Room
  • improving / Improving the game
  • styles, improving / Improving the styles
  • drawn lines, storing / Storing drawn lines on each game
  • answer checking mechanism, improving / Improving the answer checking mechanism

N

• native JSON
  • object, encoding into string / Using the native JSON to encode an object into a string
• Neighbours game
  • about / What just happened?
• new features, HTML5
  • about / Discovering new features in HTML5
  • Canvas / Canvas
  • audio / Audio
  • Touch Events / Touch Events
  • GeoLocation / GeoLocation
  • WebGL / WebGL
  • WebSocket / WebSocket
  • Local Storage / Local storage
  • offline applications / Offline applications
• newly connected user
  • handling / Handling a newly connected user
• Node.js
  • URL / Time for action – installing Node.js
  • installing / Time for action – installing Node.js
• node.js server
  • hosting / Hosting the node.js server

O

• object
  • encoding, into string / Using the native JSON to encode an object into a string
• object-oriented programming
  • about / Defining a basic class definition in JavaScript, Defining class and instant instance methods
  • reference link / Defining a basic class definition in JavaScript
• objects
  • saving, in local storage / Saving objects in the local storage, Time for action – saving the time alongside the score, What just happened?
• offline access
  • game, caching for / Caching the game for offline access, Time for action – adding the AppCache Manifest
• offline applications
  • about / Offline applications
• Ogg format
  • about / File format for WebAudio
• Online-Convert
  • URL / File format for WebAudio
  • about / File format for WebAudio
• Opera
  • URL / Preparing the development environment

P

• paddle elements
  • about / Setting up the Ping Pong game elements
• paddle hand
  • about / Setting up the Ping Pong game elements
• paddles
  • ball, hitting with / Time for action – hitting the ball with the paddles, What just happened?
• path
  • beginning, for style / Beginning a path for each style
  • closing, closePath function used / Closing a path
• path drawing
  • executing, in Canvas / Executing the path drawing in the Canvas
• perspective property, CSS
  • about / Introducing CSS' perspective property
• PhoneGap build
  • HTML5 game, building into mobile app / Building with the PhoneGap build
• physical bodies
  • pixel per meter / Pixel per meter
  • shape, creating with fixture / Creating a shape with a fixture
  • body, creating / Creating a body
  • bouncing effect, setting with restitution property / Setting the bouncing effect with the restitution property
• physical car
  • creating / Creating a physical car, Time for action – connecting the box and two circles with a revolute joint, What just happened?
• physics world
  • static ground body, creating in / Creating a static ground body in the physics world, Time for action – creating a ground in the world
  • drawing, in canvas / Drawing the physics world in the canvas, Time for action – drawing the physics world into the Canvas
  • dynamic box, creating in / Creating a dynamic box in the physics world, Time for action – putting a dynamic box in the world, What just happened?
• Pie Guy game
  • URL / Offline applications
• Ping Pong game
  • URL, for current work-in-progress version / What just happened?
• Ping Pong game elements
  • setting up / Setting up the Ping Pong game elements
  • placing, in DOM / Time for action – placing Ping Pong game elements in the DOM, What just happened?
  • manipulating, with jQuery / Manipulating game elements in DOM with jQuery
• Pixi.js
  • URL / WebGL
• playback complete events
  • audio event, handling in / Handling the audio event in playback complete events, What just happened?
• Play button
  • sound effect, adding to / Adding a sound effect to the Play button, Time for action – adding sound effects to the Play button
• players
  • notifying, with ribbon effect / Notifying players when they break a new record with a nice ribbon effect
• playing card
  • moving / Time for action – moving a playing card around
• playing card games
  • creating / Making other playing card games
• playing cards
  • sprites sheet, downloading of / Downloading the sprite sheet of playing cards
• point-in-circle formula
  • about / Detecting mouse events in circles in the Canvas
• polling approaches
  • WebSockets, comparing with / Comparing WebSockets with polling approaches
• prefix-free library
  • reference link / CSS3 transition
• properties, data object
  • dataType / Defining a data object to communicate between the client and the server
  • sender / Defining a data object to communicate between the client and the server
  • message / Defining a data object to communicate between the client and the server
  • startX / Defining a data object to communicate between the client and the server
  • startY / Defining a data object to communicate between the client and the server
  • endX / Defining a data object to communicate between the client and the server
  • endY / Defining a data object to communicate between the client and the server
• PVM Garage
  • URL / What just happened?

Q

• query selector
  • versus browser selector / jQuery's selector versus browser selector

R

• radians
  • degrees, converting to / Converting degrees to radians
• ramps
  • adding, to game environment / Adding ramps to our game environment, Time for action – creating the world with ramps
• random numbers
  • generating, in JavaScript / Generating random numbers in JavaScript
• received message, on server side
  • sending, for chat room creation / Sending every received message on the server side to create a chat room
• record
  • removing, from local storage / Removing a record from the local storage
• RequestAnimationFrame
  • about / RequestAnimationFrame
• reviewing process, app store / App store's reviewing process
• revolute joint
  • used, for connecting box and circles / Time for action – connecting the box and two circles with a revolute joint, What just happened?
  • about / What just happened?
  • anchor point, creating between two bodies / Using a revolute joint to create an anchor point between two bodies
• ribbon effect
  • players, notifying with / Notifying players when they break a new record with a nice ribbon effect
  • creating, in CSS3 / Time for action – creating a ribbon in CSS3, What just happened?

S

• scenes
  • creating, in mini piano musical game / Creating scenes in games
• scope
  • jQuery, running inside / Running jQuery inside a scope
• selection
  • about / Using jQuery
• semantics
  • about / Header and footer
• setInterval function
  • JavaScript timer, creating with / Creating a JavaScript timer with the setInterval function
• setItem function
  • arguments / Storing and loading data with local storage
• shapes
  • drawing, arc function used / Drawing circles and shapes with the Canvas arc function
• shared drawing whiteboard
  • creating, with Canvas / Making a shared drawing whiteboard with Canvas and WebSockets
  • creating, with WebSockets / Making a shared drawing whiteboard with Canvas and WebSockets
  • data object, defining for communication between client and server / Defining a data object to communicate between the client and the server
• slice function
  • reference link / Cloning an array in JavaScript
• sort function
  • reference link / Randomizing an array in JavaScript
• sort function, argument
  • compare_function / Randomizing an array in JavaScript
• sound
  • playing / Playing a sound
  • pausing / Pausing a sound
• sound effect
  • adding, to Play button / Adding a sound effect to the Play button, Time for action – adding sound effects to the Play button
• SoundJS
  • URL / Have a go hero
• sound volume
  • adjusting, of audio element / Adjusting the sound volume
• splice function
  • arguments / Removing an element in an array with the given index
  • reference link / Removing an element in an array with the given index
• sprite animation
  • about / What just happened?
  • URL, for tutorial / What just happened?
• Spritely
  • URL / What just happened?
• sprite sheet
  • animating, in Canvas / Animating a sprite sheet in Canvas
• sprites sheet
  • downloading, of playing cards / Downloading the sprite sheet of playing cards
• static ground body
  • creating, in physics world / Creating a static ground body in the physics world, Time for action – creating a ground in the world
• stored object
  • loading, from JSON string / Loading a stored object from a JSON string
• straight lines
  • drawing, between circle / Time for action – drawing straight lines between each circle
• string
  • object, encoding into / Using the native JSON to encode an object into a string
• stroke function
  • about / Beginning a path for each style
• style
  • path, beginning for / Beginning a path for each style
• styles
  • tweening, CSS3 transition used / Tweening the styles using CSS3 transition
• styling guide, W3C
  • references / Introducing the line drawing API

T

• tablets
  • touch support, adding for / Adding touch support for tablets, Time for action – adding the touch input support, What just happened?, Adding touch support for tablets, Time for action – adding touch support, What just happened?
• text
  • displaying, in HTML / Showing text dynamically in HTML
  • drawing, in Canvas / Drawing text in the Canvas
• text-based scoreboard
  • creating / Time for action – Showing the score of both players
• toggling a class style
  • about / Toggling a class with jQuery's toggleClass function
• touches
  • handling / Handling touches
• Touch Events
  • about / Touch Events
• touchmove event
  • about / Mouse move and Touch move
• touch support
  • adding, for tablets / Adding touch support for tablets, Time for action – adding the touch input support, What just happened?, Adding touch support for tablets, Time for action – adding touch support, What just happened?
• transition property
  • arguments / Tweening the styles using CSS3 transition
• Twitch
  • URL / Breaking the boundary of usual browser games
• Typekit
  • URL / Choosing different font delivery services

U

• untangleGame object, variables
  • circleRadius / What just happened?
  • thinLineThickness / What just happened?
  • boldLineThickness / What just happened?
  • circles / What just happened?
  • lines / What just happened?
  • targetCircle / What just happened?
  • levels / What just happened?
  • currentLevel / What just happened?
  • levelProgress / What just happened?
• Untangle puzzle game
  • creating, in Canvas / Making the Untangle puzzle game, Time for action – making the Untangle puzzle game in Canvas, What just happened?
  • leveling data, defining / Defining the leveling data
  • level-up, determining / Determining level-up
  • current level, displaying / Displaying the current level and completeness progress
  • completeness progress, displaying / Displaying the current level and completeness progress
  • progress level text, displaying inside canvas element / Time for action – displaying the progress level text inside the canvas element, What just happened?
  • embedded web font, using inside Canvas / Using embedded web font inside the Canvas
  • graphics, adding / Time for action – adding graphics to the game, What just happened?
• userData property
  • using, in shape / Using userData in shape and body
  • using, in body / Using userData in shape and body

V

• vertical center alignment
  • about / Vertically aligning a DOM element

W

• W3C, CSS Transforms Modules
  • URL / 3D transform functions
• Web
  • game, putting on / Putting the game on the Web
• WebAudio
  • file format / File format for WebAudio
• web fonts
  • embedding, into game / Embedding web fonts into our game
  • about / Embedding web fonts into our game
• WebGL
  • about / WebGL
• WebGL-2D
  • URL / WebGL
• WebSocket
  • about / WebSocket
  • client events / WebSocket client events
• WebSocket application
  • connection count, displaying in / Time for action – showing the connection count in a WebSocket application, What just happened?
• WebSocket connection
  • establishing / Establishing a WebSocket connection
• WebSockets
  • comparing, with polling approaches / Comparing WebSockets with polling approaches
  • shared drawing whiteboard, creating with / Making a shared drawing whiteboard with Canvas and WebSockets
  • drawing, sending through / Time for action – sending the drawing through WebSockets
• WebSocket server
  • installing / Installing a WebSocket server, Installing the Node.js WebSocket server
  • creation, for sending connection count / Creating a WebSocket server to send connection count
  • running / Time for action – running a WebSocket server , What just happened?
  • initializing / Initializing the WebSocket server
  • connection event, listening on server side / Listening to the connection event on the server side
  • client, creating for connecting to / Creating a client that connects to a WebSocket server and getting the total connections count
• Web View
  • HTML5 game, building into mobile app / Building an HTML5 game into a mobile app with the Web View
• wheels
  • adding, to car game / Adding wheels to the game, Time for action – putting two circles in the world, What just happened?
• world time
  • advancing / Advancing the world time, What just happened?

X

• X-Type
  • about / X-Type
  • URL / X-Type