You are previewing HTML5 Games Development by Example Beginner's Guide.
O'Reilly logo
HTML5 Games Development by Example Beginner's Guide

Book Description

What better way to learn browser game development using HTML5 and CSS3 than by building actual games? From simple ping pong to a sophisticated car game, this book is the perfect starting point.

  • 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

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

    Table of Contents

    1. HTML5 Games Development by Example Beginner's Guide
      1. HTML5 Games Development by Example Beginner's Guide
      2. Credits
      3. About the Author
      4. About the Reviewers
      5. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      6. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Time for action – heading
          1. What just happened?
          2. Pop quiz – heading
          3. Have a go hero – heading
        1. Reader feedback
        2. Customer support
          1. Downloading the example code for this book
          2. Errata
          3. Piracy
          4. Questions
      7. 1. Introducing HTML5 Games
        1. Discovering new features in HTML5
          1. Canvas
          2. Audio
          3. GeoLocation
          4. WebGL
          5. WebSocket
          6. Local Storage
          7. Offline application
        2. Discovering new features in CSS3
          1. CSS3 transition
          2. CSS3 transform
          3. CSS3 animation
        3. Learning more detail of new HTML5 and CSS3 features
        4. The benefit of creating HTML5 games
          1. No third-party plugin required
          2. Supporting iOS devices without plugin
          3. Breaking the boundary of usual browser games
          4. Building HTML5 games
        5. What others are playing with HTML5
          1. Matching game
          2. Sinuous
          3. Asteroid-styled bookmarklet
          4. Quake 2
          5. RumpeTroll
          6. Scrabb.ly
          7. Aves Engine
        6. Browsing more HTML5 games
        7. What we are going to create in this book
        8. Summary
      8. 2. Getting Started with DOM-based Game Development
        1. Preparing the development environment
        2. Preparing the HTML documents for a DOM-based game
        3. Time for action – Installing the jQuery library
          1. What just happened?
          2. New HTML5 doctype
          3. Header and footer
          4. Best practice to place the JavaScript code
          5. Running our code after the page is ready
          6. Pop quiz
        4. Setting up the Ping Pong game elements
        5. Time for action – Placing Ping Pong game elements in DOM
          1. What just happened?
          2. Introducing jQuery
          3. Understanding basic jQuery selectors
          4. Understanding the jQuery CSS function
          5. Benefits of using jQuery
          6. Manipulating game elements in DOM with jQuery
        6. Time for action – Changing position of elements with jQuery
          1. What just happened?
          2. Understanding the behavior of absolute position
          3. Pop quiz
        7. Getting a keyboard input from players
        8. Time for action – Moving DOM objects by a keyboard input
          1. What just happened?
          2. Understanding a key code
          3. Making constants more readable
          4. Converting strings to numbers with parseInt function
          5. Executing JavaScript expressions directly in the Console panel
          6. Have a go hero
          7. Checking the console window
        9. Supporting multiple keyboard input from players
        10. Time for action – Listening to keyboard input with another approach
          1. What just happened?
          2. Declaring global variables in a better way
          3. Creating a JavaScript timer with setInterval function
          4. Understanding Game Loop
        11. Moving a DOM object with JavaScript Interval
        12. Time for action – Moving the ball with JavaScript Interval
          1. What just happened?
        13. Beginning collision detection
        14. Time for action – Hitting the ball with the paddles
          1. What just happened?
          2. Have a go hero
        15. Showing text dynamically in HTML
        16. Time for action – Showing the score of both players
          1. What just happened?
          2. Have a go hero – Winning the game
        17. Summary
      9. 3. Building a Memory Matching Game in CSS3
        1. Moving game objects with CSS3 transition
        2. Time for action – Moving a playing card around
          1. What just happened?
            1. 2D transforms functions
            2. 3D transforms functions
          2. Tweening the styles by using CSS3 transition
          3. Have a go hero
        3. Creating a card-flipping effect
        4. Time for action – Flipping a card with CSS3
          1. What just happened?
          2. Toggling class with jQuery toggleClass function
          3. Controlling the visibility of overlapped elements by z-index
          4. Introducing CSS perspective property
          5. Have a go hero
          6. Introducing backface-visibility
        5. Creating a card matching memory game
          1. Downloading the sprites sheet of playing cards
          2. Setting up the game environment
        6. Time for action – Preparing the card matching game
          1. What just happened?
          2. Cloning DOM elements with jQuery
          3. Selecting the first child of an element in jQuery by using child filters
          4. Vertically aligning a DOM element
          5. Using CSS sprite with a background position
        7. Adding game logic to the matching game
        8. Time for action – Adding game logic to the matching game
          1. What just happened?
          2. Executing code after CSS transition ended
          3. Delaying code execution on flipping cards
          4. Randomizing an array in JavaScript
          5. Storing internal custom data with an HTML5 custom data attribute
          6. Pop quiz
          7. Accessing custom data attribute with jQuery
          8. Pop quiz
          9. Have a go hero
          10. Making other playing card games
          11. Have a go hero
        9. Embedding web fonts into our game
        10. Time for action – Embedding a font from Google Font Directory
          1. What just happened?
          2. Choosing different font delivery services
        11. Summary
      10. 4. Building the Untangle Game with Canvas and Drawing API
        1. Introducing the HTML5 Canvas Element
        2. Drawing a circle in canvas
        3. Time for action – Drawing color circles on canvas
          1. What just happened?
          2. Putting fallback content when the web browser does not support canvas
          3. Drawing circles and shapes with canvas arc function
          4. Converting degree to radians
        4. Time for action – Drawing different arcs with arc function
          1. What just happened?
          2. Pop quiz
          3. Executing the path drawing in canvas
          4. Beginning a path for each style
          5. Have a go hero
          6. Closing a path
          7. Pop quiz
          8. Wrapping the circle drawing in function
        5. Time for action – Putting the circle drawing code into a function
          1. What just happened?
          2. Generating random numbers in JavaScript
          3. Saving the circle position
        6. Time for action – Saving the circle position
          1. What just happened?
          2. Defining a basic class definition in JavaScript
          3. Have a go hero
        7. Drawing lines in canvas
        8. Time for action – Drawing straight lines between each circle
          1. What just happened?
          2. Introducing the line drawing API
        9. Interacting with drawn objects in canvas with mouse events
        10. Time for action – Dragging the circles in canvas
          1. What just happened?
          2. Getting the mouse position in the canvas element
          3. Detecting mouse events on circles in canvas
          4. Pop quiz
          5. Game loop
          6. Clearing the canvas
          7. Pop quiz
        11. Detecting line intersection in canvas
        12. Time for action – Distinguishing the intersected lines
          1. What just happened?
          2. Determining whether two line segments intersect
        13. Making the untangle puzzle game
        14. Time for action – Making the untangle puzzle game in canvas
          1. What just happened?
          2. Defining the leveling data
          3. Determining level-up
          4. Displaying current level and completeness progress
          5. Have a go hero
        15. Summary
      11. 5. Building a Canvas Games Masterclass
        1. Filling shapes with gradient color
        2. Time for action – Drawing a gradient color background to the Untangle game
          1. What just happened?
          2. Adding color stops in the gradient color
          3. Filling radial gradient color
        3. Time for action – Filling the circles with radial gradient color
          1. What just happened?
          2. Have a go hero – Filling gradients
        4. Drawing text in canvas
        5. Time for action – Displaying the progress level text inside the canvas element
          1. What just happened?
          2. Pop quiz – Drawing text in canvas
          3. Using embedded web font inside canvas
        6. Time for action – Embedding Google Web Font into the canvas element
          1. What just happened?
        7. Drawing images in canvas
        8. Time for action – Adding graphics to the game
          1. What just happened?
          2. Have a go hero
          3. Using the drawImage function
          4. Have a go hero – Optimizing the background image
          5. Decorating the canvas-based game
        9. Time for action – Adding CSS styles and images decoration to the game
          1. What just happened?
          2. Pop quiz – Styling a canvas background
        10. Animating a sprite sheet in canvas
        11. Time for action – Making a game guide animation
          1. What just happened?
        12. Creating a multi-layers canvas game
        13. Time for action – Dividing the game into four layers
          1. What just happened?
          2. Mixing CSS technique with Canvas drawing
          3. Have a go hero
        14. Summary
      12. 6. Adding Sound Effects to your Games
        1. Adding a sound effect to the play button
        2. Time for action – Adding sound effects to the play button
          1. What just happened?
          2. Defining an audio element
          3. Playing a sound
          4. Pausing a sound
          5. Adjusting the sound volume
          6. Using the jQuery hover event
          7. Creating the Ogg format audio to support Mozilla Firefox
        3. Time for action – Converting an MP3 sound to Ogg format with Audacity
          1. What just happened?
          2. Supporting different web browsers with different audio formats
          3. Pop quiz – Using the audio tag
        4. Building a mini piano musical game
        5. Time for action – Creating a basic background to the music game
          1. What just happened?
          2. Creating scenes in HTML5 games
          3. Visualizing the music play back
        6. Time for action – Creating the playback visualization in the music game
          1. What just happened?
          2. Choosing the right song for the music game
          3. Storing and extracting the song level data
          4. Getting the elapsed time of the game
          5. Creating music dots
          6. Moving the music dots
        7. Linking the play button to the music game scene
        8. Time for action – Animating the scene transition
          1. What just happened?
          2. Creating a slide-in effect in CSS3
          3. Have a go hero – Creating different scene transition effects
        9. Creating a keyboard-driven mini piano musical game
        10. Time for action – Creating a mini piano musical game
          1. What just happened?
          2. Hitting the three music lines by key down
          3. Determining music dot hits on key down
          4. Removing an element in an array with the given index
        11. Time for action – Removing music dots with the splice function
          1. What just happened?
          2. Have a go hero
        12. Adding additional features to the mini piano game
          1. Adjusting the music volume according to the player
        13. Time for action – Removing missed melody notes
          1. What just happened?
          2. Removing dots from the game
          3. Storing the success count in the last five results
          4. Have a go hero
          5. Recording music notes as level data
        14. Time for action – Adding functionality to record the music level data
          1. What just happened?
        15. Handling the audio event on playback completes
        16. Time for action – Indicating a game over event in the console
          1. What just happened?
          2. Handling audio events
          3. Have a go hero
        17. Summary
      13. 7. Using Local Storage to Store Game Data
        1. Storing data by using HTML5 local storage
          1. Creating a game over dialog
        2. Time for action – Creating a game over dialog with the elapsed played time
          1. What just happened?
          2. Saving scores in the browser
        3. Time for action – Saving the game score
          1. What just happened?
          2. Storing and loading data with local storage
          3. The local storage saves the string value
          4. Treating the local storage object as an associated array
        4. Saving objects in the local storage
        5. Time for action – Saving the time alongside the score
          1. What just happened?
          2. Getting the current date and time in JavaScript
          3. Using the native JSON to encode an object into a string
          4. Loading a stored object from a JSON string
          5. Inspecting the local storage in a console window
        6. Notifying players of breaking a new record with a nice ribbon effect
        7. Time for action – Creating a ribbon in CSS3
          1. What just happened?
          2. Have a go hero – Saving and comparing only to the fastest time
        8. Saving the entire game progress
          1. Saving the game progress
        9. Time for action – Saving all essential game data in the local storage
          1. What just happened?
          2. Removing a record from the local storage
          3. Cloning an array in JavaScript
          4. Resuming the game progress
        10. Time for action – Resuming a game from the local storage
          1. What just happened?
          2. Pop quiz – Using local storage
        11. Summary
      14. 8. Building a Multiplayer Draw-and-Guess Game with WebSockets
        1. Trying an existing WebSockets web application
        2. Time for action – Trying the multiuser sketchpad
          1. What just happened?
        3. Installing a WebSocket server
          1. Installing the Node.JS WebSocket server
        4. Time for action – Installing Node.JS
          1. What just happened?
          2. Creating a WebSockets server to broadcast the connection count
        5. Time for action – Creating a WebSocket server that sends the total count of connections
          1. What just happened?
          2. Initializing the WebSockets server
          3. Listening to the connection event on the server side
          4. Getting a count of connected clients on the server side
          5. Broadcasting a message to all connected browsers
          6. Creating a client that connects to a WebSocket server and getting the total connections count
        6. Time for action – Showing the connection count in a WebSocket application
          1. What just happened?
          2. Establishing a WebSocket connection
          3. WebSockets client events
        7. Building a chatting application with WebSockets
          1. Sending a message to the server
        8. Time for action – Sending a message to the server through WebSockets
          1. What just happened?
          2. Sending a message from the client to the server
          3. Receiving a message on the server side
        9. Broadcasting every received message on the server side to create a chat room
        10. Time for action – Broadcasting the messages to all connected browsers
          1. What just happened?
          2. Comparing between WebSockets and polling approaches
          3. Pop quiz – The benefit of WebSockets verses the polling approach
        11. Making a shared drawing whiteboard with Canvas and WebSockets
          1. Building a local drawing sketchpad
        12. Time for action – Making a local drawing whiteboard with the Canvas
          1. What just happened?
            1. Drawing on the canvas
          2. Have a go hero – Drawing with colors
          3. Broadcasting the drawing to all connected browsers
        13. Time for action – Sending the drawing through WebSockets
          1. What just happened?
          2. Defining a data object to communicate between the client and the server
          3. Packing the drawing lines data into JSON for broadcasting
          4. Recreating the drawing lines after receiving them from other clients
        14. Building a multiplayer draw-and-guess game
        15. Time for action – Building the draw-and-guess game
          1. What just happened?
          2. Controlling the game flow of a multiplayer game
          3. Enumerating connected clients on the serverside
          4. Sending a message to a specific connection on the server side
          5. Improving the game
            1. Storing drawn lines on each game
          6. Have a go hero
            1. Improving the answer checking mechanism
          7. Have a go hero
        16. Decorating the draw-and-guess game with CSS
        17. Time for action – Decorating the game
          1. What just happened?
        18. Summary
      15. 9. Building a Physics Car Game with Box2D and Canvas
        1. Installing the Box2D JavaScript library
        2. Time for action – Installing the Box2D physics library
          1. What just happened?
          2. Using b2World to create a new world
          3. Using b2AABB to define a bounding area
          4. Setting the gravity of the world
          5. Setting the Box2D to ignore the slept object
        3. Creating a static ground body in the physics world
        4. Time for action – Creating a ground in the world
          1. What just happened?
          2. Creating a shape
          3. Creating a body
        5. Drawing the physics world in the canvas
        6. Time for action – Drawing the physics world into the canvas
          1. What just happened?
        7. Creating a dynamic box in the physics world
        8. Time for action – Putting a dynamic box in the world
          1. What just happened?
          2. Setting the bouncing effect with the restitution property
        9. Advancing the world time
        10. Time for action – Setting up the world step loop
          1. What just happened?
        11. Adding wheels to the game
        12. Time for action – Putting two circles in the world
          1. What just happened?
        13. Creating a physical car
        14. Time for action – Connecting the box and two circles with revolute joint
          1. What just happened?
          2. Using a revolute joint to create an anchor point between two bodies
        15. Adding force to the car with a keyboard input
        16. Time for action – Adding force to the car
          1. What just happened?
          2. Applying force to a body
          3. Understanding the difference between ApplyForce and ApplyImpulse
          4. Have a go hero
          5. Adding ramps to our game environment
        17. Time for action – Creating the world with ramps
          1. What just happened?
          2. Have a go hero – Creating different environments with different joints
        18. Checking collisions in the Box2D world
        19. Time for action – Checking a collision between the car and the destination body
          1. What just happened?
          2. Getting the collision contact list
          3. Have a go hero
        20. Restarting the game
        21. Time for action – Restarting the game while pressing the R key
          1. What just happened?
          2. Have a go hero – Creating the game over wall
        22. Adding a level support to our car game
        23. Time for action – Loading game with levels data
          1. What just happened?
          2. Have a go hero – Creating more levels
        24. Replacing the Box2D outline drawing with graphics
        25. Time for action – Adding a flag graphic and a car graphic to the game
          1. What just happened?
          2. Using userData in shape and body
          3. Drawing graphics every frame according to the state of its physics body
          4. Rotating and translating an image in the canvas
          5. Have a go hero – Applying the previously learned technique to the car game
        26. Adding a final touch to make the game fun to play
        27. Time for action – Decorating the game and adding a fuel limitation
          1. What just happened?
          2. Adding fuel to add a constraint when applying force
          3. Presenting the remaining fuel in a CSS3 progress bar
        28. Summary
          1. HTML5 game engines
          2. Game sprites, and textures
          3. Sound effects
      16. A. Pop Quiz Answers
        1. Chapter 2: Getting Started with DOM-based Game Development
          1. Running our code after the page is ready
          2. Understanding the behavior of absolution position
        2. Chapter 3: Building Memory Match Game in CSS3
          1. Storing internal custom data with HTML5 custom data attribute
          2. Accessing custom data attribute with jQuery
        3. Chapter 4: Building Untangle Game with Canvas and Drawing API
          1. Using startAngle and endAngle
          2. Using closePath with fill command only
          3. Accessing shapes in canvas
          4. Clearing drawn shapes in canvas
        4. Chapter 5: Building Canvas Games Masterclass
          1. Drawing text in canvas
          2. Styling canvas background
        5. Chapter 6: Adding Sound Effects to your Games
          1. Using the audio tag
        6. Chapter 7: Using Local Storage to Store Game Data
          1. Using local storage
        7. Chapter 8: Building Multiplayer Draw-and-Guess Game with WebSockets