HTML5 Games Development by Example: Beginner’s Guide


HTML5 Games Development by Example: Beginner’s Guide
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • Learn HTML5 game development by building six fun example projects
  • Full, clear explanations of all the essential techniques
  • Covers puzzle games, action games, multiplayer, and Box 2D physics
  • Use the Canvas with multiple layers and sprite sheets for rich graphical games
  • Harness CSS3 special effects to create polished, engaging puzzle games

Book Details

Language : English
Paperback : 352 pages [ 235mm x 191mm ]
Release Date : August 2011
ISBN : 1849691266
ISBN 13 : 9781849691260
Author(s) : Makzan
Topics and Technologies : All Books, Game Development, Beginner's Guides, Games, Open Source, Web Development

Table of Contents

Preface
Chapter 1: Introducing HTML5 Games
Chapter 2: Getting Started with DOM-based Game Development
Chapter 3: Building a Memory Matching Game in CSS3
Chapter 4: Building the Untangle Game with Canvas and Drawing API
Chapter 5: Building a Canvas Games Masterclass
Chapter 6: Adding Sound Effects to your Games
Chapter 7: Using Local Storage to Store Game Data
Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets
Chapter 9: Building a Physics Car Game with Box2D and Canvas
Appendix: Pop Quiz Answers
Index
  • Chapter 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
    • Chapter 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
        • New HTML5 doctype
        • Header and footer
        • Best practice to place the JavaScript code
        • Running our code after the page is ready
      • Setting up the Ping Pong game elements
      • Time for action – Placing Ping Pong game elements in DOM
        • 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
        • Understanding the behavior of absolute position
      • Getting a keyboard input from players
      • Time for action – Moving DOM objects by a keyboard input
        • Understanding a key code
        • Making constants more readable
        • Converting strings to numbers with parseInt function
        • Executing JavaScript expressions directly in the Console panel
        • Checking the console window
      • Supporting multiple keyboard input from players
      • Time for action – Listening to keyboard input with another approach
        • 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
      • Beginning collision detection
      • Time for action – Hitting the ball with the paddles
      • Showing text dynamically in HTML
      • Time for action – Showing the score of both players
      • Summary
      • Creating a card-flipping effect
      • Time for action – Flipping a card with CSS3
        • Toggling class with jQuery toggleClass function
        • Controlling the visibility of overlapped elements by z-index
        • Introducing CSS perspective property
        • 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
        • 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
        • 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
        • Accessing custom data attribute with jQuery
        • Making other playing card games
      • Embedding web fonts into our game
      • Time for action – Embedding a font from Google Font Directory
        • Choosing different font delivery services
      • Summary
        • Chapter 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
            • 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
            • Executing the path drawing in canvas
            • Beginning a path for each style
            • Closing a path
            • Wrapping the circle drawing in function
          • Time for action – Putting the circle drawing code into a function
            • Generating random numbers in JavaScript
            • Saving the circle position
          • Time for action – Saving the circle position
            • Defining a basic class definition in JavaScript
          • Drawing lines in canvas
          • Time for action – Drawing straight lines between each circle
            • Introducing the line drawing API
          • Interacting with drawn objects in canvas with mouse events
          • Time for action – Dragging the circles in canvas
            • Getting the mouse position in the canvas element
            • Detecting mouse events on circles in canvas
            • Game loop
            • Clearing the canvas
          • Detecting line intersection in canvas
          • Time for action – Distinguishing the intersected lines
            • Determining whether two line segments intersect
          • Making the untangle puzzle game
          • Time for action – Making the untangle puzzle game in canvas
            • Defining the leveling data
            • Determining level-up
            • Displaying current level and completeness progress
          • Summary
          • Chapter 5: Building a Canvas Games Masterclass
            • Filling shapes with gradient color
            • Time for action – Drawing a gradient color background to the Untangle game
              • Adding color stops in the gradient color
              • Filling radial gradient color
            • Time for action – Filling the circles with radial gradient color
            • Drawing text in canvas
            • Time for action – Displaying the progress level text inside the canvas element
              • Using embedded web font inside canvas
            • Time for action – Embedding Google Web Font into the
            • canvas element
            • Drawing images in canvas
            • Time for action – Adding graphics to the game
              • Using the drawImage function
              • Decorating the canvas-based game
            • Time for action – Adding CSS styles and images decoration to the game
            • Animating a sprite sheet in canvas
            • Time for action – Making a game guide animation
            • Creating a multi-layers canvas game
            • Time for action – Dividing the game into four layers
              • Mixing CSS technique with Canvas drawing
            • Summary
            • Chapter 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
                • 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
                • Supporting different web browsers with different audio formats
              • Building a mini piano musical game
              • Time for action – Creating a basic background to the
              • music game
                • Creating scenes in HTML5 games
                • Visualizing the music play back
              • Time for action – Creating the playback visualization in the music game
                • 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
                • Creating a slide-in effect in CSS3
              • Creating a keyboard-driven mini piano musical game
              • Time for action – Creating a mini piano musical game
                • Hitting the three music lines by key down
                • Determining music dot hits on key down
                • Removing an element in an array with the given index
              • Time for action – Removing music dots with the splice function
              • Adding additional features to the mini piano game
                • Adjusting the music volume according to the player
              • Time for action – Removing missed melody notes
                • Removing dots from the game
                • Storing the success count in the last five results
                • Recording music notes as level data
              • Time for action – Adding functionality to record the music level data
              • Handling the audio event on playback completes
              • Time for action – Indicating a game over event in the console
                • Handling audio events
              • Summary
              • Chapter 7: Using Local Storage to Store Game Data
                • Storing data by using HTML5 local storage
                  • Creating a game over dialog
                • Time for action – Creating a game over dialog with the elapsed played time
                  • Saving scores in the browser
                • Time for action – Saving the game score
                  • Storing and loading data with local storage
                  • The local storage saves the string value
                  • Treating the local storage object as an associated array
                • Saving objects in the local storage
                • Time for action – Saving the time alongside the score
                  • Getting the current date and time in JavaScript
                  • Using the native JSON to encode an object into a string
                  • Loading a stored object from a JSON string
                  • Inspecting the local storage in a console window
                • Notifying players of breaking a new record with a nice ribbon effect
                • Time for action – Creating a ribbon in CSS3
                • Saving the entire game progress
                  • Saving the game progress
                • Time for action – Saving all essential game data in the local storage
                  • Removing a record from the local storage
                  • Cloning an array in JavaScript
                  • Resuming the game progress
                • Time for action – Resuming a game from the local storage
                • Summary
                • Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets
                  • Trying an existing WebSockets web application
                  • Time for action – Trying the multiuser sketchpad
                  • Installing a WebSocket server
                    • Installing the Node.JS WebSocket server
                  • Time for action – Installing Node.JS
                    • Creating a WebSockets server to broadcast the connection count
                  • Time for action – Creating a WebSocket server that sends the total count of connections
                    • Initializing the WebSockets server
                    • Listening to the connection event on the server side
                    • Getting a count of connected clients on the server side
                    • Broadcasting a message to all connected browsers
                    • Creating a client that connects to a WebSocket server and getting the total connections count
                  • Time for action – Showing the connection count in a WebSocket application
                    • Establishing a WebSocket connection
                    • WebSockets client events
                  • Building a chatting application with WebSockets
                    • Sending a message to the server
                  • Time for action – Sending a message to the server through WebSockets
                    • Sending a message from the client to the server
                    • Receiving a message on the server side
                  • Broadcasting every received message on the server side to create a chat room
                  • Time for action – Broadcasting the messages to all connected browsers
                    • Comparing between WebSockets and polling approaches
                  • Making a shared drawing whiteboard with Canvas and WebSockets
                    • Building a local drawing sketchpad
                  • Time for action – Making a local drawing whiteboard with the Canvas
                    • Drawing on the canvas
                  • Broadcasting the drawing to all connected browsers
                • Time for action – Sending the drawing through WebSockets
                  • Defining a data object to communicate between the client and the server
                  • Packing the drawing lines data into JSON for broadcasting
                  • Recreating the drawing lines after receiving them from other clients
                • Building a multiplayer draw-and-guess game
                • Time for action – Building the draw-and-guess game
                  • Controlling the game flow of a multiplayer game
                  • Enumerating connected clients on the serverside
                  • Sending a message to a specific connection on the server side
                  • Improving the game
                    • Storing drawn lines on each game
                    • Improving the answer checking mechanism
                • Decorating the draw-and-guess game with CSS
                • Time for action – Decorating the game
                • Summary
                  • Chapter 9: Building a Physics Car Game with Box2D and Canvas
                    • Installing the Box2D JavaScript library
                    • Time for action – Installing the Box2D physics library
                      • Using b2World to create a new world
                      • Using b2AABB to define a bounding area
                      • Setting the gravity of the world
                      • Setting the Box2D to ignore the slept object
                    • Creating a static ground body in the physics world
                    • Time for action – Creating a ground in the world
                      • Creating a shape
                      • Creating a body
                    • Drawing the physics world in the canvas
                    • Time for action – Drawing the physics world into the canvas
                    • Creating a dynamic box in the physics world
                    • Time for action – Putting a dynamic box in the world
                      • Setting the bouncing effect with the restitution property
                    • Advancing the world time
                    • Time for action – Setting up the world step loop
                    • Adding wheels to the game
                    • Time for action – Putting two circles in the world
                    • Creating a physical car
                    • Time for action – Connecting the box and two circles with revolute joint
                      • Using a revolute joint to create an anchor point between two bodies
                    • Adding force to the car with a keyboard input
                    • Time for action – Adding force to the car
                      • Applying force to a body
                      • Understanding the difference between ApplyForce and ApplyImpulse
                      • Adding ramps to our game environment
                    • Time for action – Creating the world with ramps
                    • Checking collisions in the Box2D world
                    • Time for action – Checking a collision between the car and the destination body
                      • Getting the collision contact list
                    • Restarting the game
                    • Time for action – Restarting the game while pressing the R key
                    • Adding a level support to our car game
                    • Time for action – Loading game with levels data
                    • Replacing the Box2D outline drawing with graphics
                    • Time for action – Adding a flag graphic and a car graphic to the game
                      • Using userData in shape and body
                      • Drawing graphics every frame according to the state of its physics body
                      • Rotating and translating an image in the canvas
                    • Adding a final touch to make the game fun to play
                    • Time for action – Decorating the game and adding a fuel
                    • limitation
                      • Adding fuel to add a constraint when applying force
                      • Presenting the remaining fuel in a CSS3 progress bar
                    • Summary
                      • HTML5 game engines
                      • Game sprites, and textures
                      • Sound effects
                    • Appendix: Pop Quiz Answers
                      • Chapter 2: Getting Started with DOM-based Game Development
                        • Running our code after the page is ready
                        • Understanding the behavior of absolution position
                      • Chapter 3: Building Memory Match Game in CSS3
                        • Storing internal custom data with HTML5 custom data attribute
                        • Accessing custom data attribute with jQuery
                      • Chapter 4: Building Untangle Game with Canvas and Drawing API
                        • Using startAngle and endAngle
                        • Using closePath with fill command only
                        • Accessing shapes in canvas
                        • Clearing drawn shapes in canvas
                      • Chapter 5: Building Canvas Games Masterclass
                        • Drawing text in canvas
                        • Styling canvas background
                      • Chapter 6: Adding Sound Effects to your Games
                        • Using the audio tag
                      • Chapter 7: Using Local Storage to Store Game Data
                        • Using local storage
                      • Chapter 8: Building Multiplayer Draw-and-Guess Game with WebSockets

                      Makzan

                      Makzan is the founder of 42games limited (http://42games.net). He began building apps and games on the Web when he was a child. He built iOS games that have ranked No.1 on the App Store as well as demos on the Apple store. He now focuses on teaching programming. Makzan has also written two books named Flash Multiplayer Virtual World and HTML5 Games Development Beginner’s Guide. I would like to thank the whole team from Packt Publishing. The video series will not be possible without the help from all the editors. I thank all reviewers for providing very useful comments from which I have learnt a lot. I thank my family for giving me support during the process.

                      Code Downloads

                      Download the code and support files for this book.


                      Submit Errata

                      Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                      Errata

                      - 3 submitted: last submission 29 May 2013

                      Errata type: Others | Page number: 9 | Errata date: 06 Sep 2011

                      It is the link for learning web gl. It should be learningwebgl instead of learnwebgl.com

                       

                      Errata type: Typo | Page number: 45 | Errata date: 18 Feb 2012

                      Last paragraph, first line, "it may increase the change..."

                      Should be :

                      "it may increase the chance..."

                       

                      Errata type: Typo | Page number: 251, 253 | Errata date: 23 April 2013

                      Chapter 5, "Time for action – Making a game guide animation" has several references to a timer event "setInterval(guideNextFrame, 500);" saying that it updates a variable "every 500 meters" rather than milliseconds.

                       

                      Errata type: Code | Page number: 126 | Errata date: 23 May 2013

                      The code at the bottom of the page:

                      untangleGame.circles.push(new Point(level.circles[i].x, level.circles[i].y, 10));

                      Should be:

                      untangleGame.circles.push(new Circle(level.circles[i].x, level.circles[i].y, 10));

                       

                      Errata type: Code | Page number: 157 | Errata date: 29 May 2013

                      The attribute "height" appears twice in the top CSS code, only one is enough.

                       

                      Errata type: Code| Page number: 43 | Errata date: 30 Oct 2011

                      In Step 2 it says to delete all the code.

                      It should say :

                      "delete all the code except the first declaration "var KEY . . . ";

                      otherwise the KEY references in movePaddles() won't work.

                       

                      Errata type: Typo | Page number: 46

                      The Discussion column 5th line: "the hello function 100 milliseconds" is changed to "the hello function every 100 milliseconds"

                      Sample chapters

                      You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                      Frequently bought together

                      HTML5 Games Development by Example: Beginner’s Guide +    HTML5 Graphing and Data Visualization Cookbook =
                      50% Off
                      the second eBook
                      Price for both: $39.00

                      Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                      What you will learn from this book

                      • Start nice and simple: build a traditional Ping Pong game with two players playing in one computer.
                      • Create a CSS3-driven card game with transform and 3D flipping effects.
                      • Use the Canvas with multiple layers and the Drawing API to create a string untangle game
                      • Frame-by-frame animation with sprite sheets
                      • Create HTML5 game audio, and build a piano-based musical game
                      • Store game data persistently using local storage.
                      • Building real-time network multiplayer games
                      • Adding physics to your canvas games using the Box2D physics engine.

                      In Detail

                      HTML5 promises to be the hot new platform for online games. HTML5 games work on computers, smartphones, and tablets – including iPhones and iPads. Be one of the first developers to build HTML5 games today and be ready for tomorrow!

                      The book will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.

                      HTML5, CSS3 and related JavaScript API is the latest hot topic in Web. These standards bring us the new game market, HTML5 Games. With the new power from them, we can design games with HTML5 elements, CSS3 properties and JavaScript to play in browsers.

                      The book divides into 9 chapters with each one focusing on one topic. We will create 6 games in the book and specifically learn how we draw game objects, animate them, adding audio, connecting players and building physics game with Box2D physics engine.

                      Approach

                      Step-by-step example-driven tutorials to create several games from scratch. Each game comes with a specific learning topic in HTML5 or CSS3.

                      Who this book is for

                      This book is for web designers or game developers who want to build browser games with HTML5 and CSS3. You’ll need some background with web development or other programming but no game development experience is necessary.

                      Code Download and Errata
                      Packt Anytime, Anywhere
                      Register Books
                      Print Upgrades
                      eBook Downloads
                      Video Support
                      Contact Us
                      Awards Voting Nominations Previous Winners
                      Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                      Resources
                      Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software