HTML5 Game Development by Example : Beginner's Guide - Second Edition

HTML5 Game Development by Example : Beginner's Guide - Second Edition

by Makzan
Released June 2015
Publisher(s): Packt Publishing
ISBN: 9781785287770

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Make the most of HTML5 techniques to create exciting games from scratch

  • Get to grips with the latest HTML5, Canvas, CSS, and JavaScript techniques
  • Learn to create exciting puzzle games, action games, multiplayer, and Box2D physics
  • A task-based approach to achieve practical skills required for game development

In Detail

HTML5 is a markup language used to structure and present content for the World Wide Web and is a core technology of the Internet. It is supported across different platforms and is also supported by various browsers. Its innovative features, such as canvas, audio, and video elements, make it an excellent game building tool.

HTML5 Game Development by Example Beginner's Guide Second Edition is a step-by-step tutorial that will help you create several games from scratch, with useful examples. Starting with an introduction to HTML5, the chapters of this book help you gain a better understanding of the various concepts and features of HTML5. By the end of the book, you'll have the knowledge, skills, and level of understanding you need to efficiently develop games over the network using HTML5.

What You Will Learn

  • Build real-time network multiplayer games
  • Add physics to your canvas games by using the Box2D physics engine
  • Build a CSS3-driven card game with transform and 3D flipping effects
  • Learn to add sounds to your games
  • Make a drawing tool in Canvas
  • Create multiple layers in a canvas game
  • Store game data persistently by using local storage
  • Use sprite sheets to create frame-based animation

Table of contents

  1. HTML5 Game Development by Example Beginner's Guide Second Edition
    1. Table of Contents
    2. HTML5 Game Development by Example Beginner's Guide Second Edition
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Sections
      5. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      6. Conventions
      7. Reader feedback
      8. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Introducing HTML5 Games
      1. Discovering new features in HTML5
        1. Canvas
        2. Audio
        3. Touch Events
        4. GeoLocation
        5. WebGL
        6. WebSocket
        7. Local storage
        8. Offline applications
      2. Discovering new features in CSS3
        1. CSS3 transition
        2. CSS3 transform
        3. CSS3 animation
      3. The benefit of creating HTML5 games
        1. Free and open standards
        2. Support for multiple platforms
        3. Native app-rendering performance in particular scenarios
        4. Breaking the boundary of usual browser games
        5. Building HTML5 games
      4. What others are playing with HTML5
        1. Coca-Cola's Ahh campaign
        2. Asteroid-styled bookmarklet
        3. X-Type
        4. Cursors.io
      5. What we are going to create in this book
      6. Preparing the development environment
      7. Summary
    9. 2. Getting Started with DOM-based Game Development
      1. Preparing the HTML documents for a DOM-based game
      2. Time for action – installing the jQuery library
        1. What just happened?
        2. New HTML5 doctype
        3. Header and footer
        4. The best practice to place the JavaScript code
        5. Choosing the jQuery file
        6. Running jQuery inside a scope
        7. Running our code after the page is ready
        8. Pop quiz
        9. Downloading the image assets
      3. Setting up the Ping Pong game elements
      4. Time for action – placing Ping Pong game elements in the DOM
        1. What just happened?
        2. Using jQuery
        3. Understanding basic jQuery selectors
        4. Understanding the jQuery CSS function
        5. Manipulating game elements in DOM with jQuery
        6. Understanding the behavior of absolute position
        7. Declaring global variables in a better way
        8. Pop quiz
      5. Getting mouse input
      6. Time for action – moving DOM objects by mouse input
        1. What just happened?
        2. Getting the mouse event
        3. RequestAnimationFrame
        4. Checking the console window
        5. Moving a DOM object with JavaScript Interval
      7. Time for action – Moving the ball with JavaScript Interval
        1. What just happened?
        2. Creating a JavaScript timer with the setInterval function
        3. Understanding the game loop
        4. Separating the data and the view logic
      8. Beginning collision detection
      9. Time for action – hitting the ball with the paddles
        1. What just happened?
        2. Have a go hero
      10. Controlling the left paddle movement
      11. Time for action – auto moving the left paddle
        1. What just happened?
      12. Showing text dynamically in HTML
      13. Time for action – Showing the score of both players
        1. What just happened?
        2. Have a go hero – winning the game
      14. Summary
    10. 3. Building a Card-matching Game in CSS3
      1. Moving game objects with CSS3 transition
      2. Time for action – moving a playing card around
        1. What just happened?
        2. 2D transform functions
        3. 3D transform functions
        4. Tweening the styles using CSS3 transition
        5. 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 a class with jQuery's toggleClass function
        3. Introducing CSS' perspective property
        4. Have a go hero
        5. Introducing backface-visibility
      5. Creating a card-matching memory game
        1. Downloading the sprite 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 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 the CSS transition has 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 the Google Fonts directory
        1. What just happened?
        2. Choosing different font delivery services
      11. Summary
    11. 4. Building the Untangle Game with Canvas and the Drawing API
      1. Introducing the HTML5 canvas element
      2. Drawing a circle in the Canvas
      3. Time for action – drawing color circles in the Canvas
        1. What just happened?
        2. Putting in fallback content when the web browser does not support the Canvas
        3. The Canvas context
        4. Drawing circles and shapes with the Canvas arc function
        5. Converting degrees to radians
        6. Executing the path drawing in the Canvas
        7. Beginning a path for each style
        8. Have a go hero
        9. Closing a path
        10. Pop quiz
        11. Wrapping the circle drawing in a function
      4. Time for action – putting the circle drawing code into a function
        1. What just happened?
        2. Dividing code into files
        3. Generating random numbers in JavaScript
        4. Saving the circle position
      5. Time for action – saving the circle position
        1. What just happened?
        2. Defining a basic class definition in JavaScript
        3. Have a go hero
      6. Drawing lines in the Canvas
      7. Time for action – drawing straight lines between each circle
        1. What just happened?
        2. Introducing the line drawing API
      8. Using mouse events to interact with objects drawn in the Canvas
      9. Time for action – dragging the circles in the Canvas
        1. What just happened?
        2. Detecting mouse events in circles in the Canvas
        3. Pop quiz
        4. Game loop
        5. Clearing the Canvas
        6. Pop quiz
      10. Detecting line intersection in the Canvas
      11. Time for action – distinguishing the intersected lines
        1. What just happened?
        2. Determining whether two line segments intersect
      12. Adding touch support for tablets
      13. Time for action – adding the touch input support
        1. What just happened?
        2. Handling touches
        3. Mouse move and Touch move
      14. Summary
    12. 5. Building a Canvas Game's Masterclass
      1. Making the Untangle puzzle game
      2. 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 the current level and completeness progress
        5. Have a go hero
      3. Drawing text in the Canvas
      4. Time for action – displaying the progress level text inside the canvas element
        1. What just happened?
        2. Pop quiz – drawing text in the Canvas
        3. Using embedded web font inside the Canvas
      5. Time for action – embedding a Google web font into the canvas element
        1. What just happened?
      6. Drawing images in the Canvas
      7. 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
      8. Time for action – adding CSS styles and image decoration to the game
        1. What just happened?
        2. Pop quiz – styling a Canvas background
      9. Animating a sprite sheet in Canvas
      10. Time for action – making a game guide animation
        1. What just happened?
      11. Creating a multilayer Canvas game
      12. Time for action – dividing the game into four layers
        1. What just happened?
        2. Mixing a CSS technique with Canvas drawing
        3. Have a go hero
      13. Summary
    13. 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. jQuery's selector versus browser selector
        5. Pausing a sound
        6. Adjusting the sound volume
        7. Using the jQuery hover event
        8. File format for WebAudio
        9. Pop quiz – using the audio tag
      3. Building a mini piano musical game
      4. Time for action – creating a basic background for the music game
        1. What just happened?
        2. Creating scenes in games
        3. Creating a slide-in effect in CSS3
        4. Have a go hero – creating different scene transition effects
        5. Visualizing the music playback
      5. 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. Playing audio on mobile devices
        4. Storing and extracting the song-level data
        5. Getting the elapsed time of the game
        6. Creating music dots
        7. Moving the music dots
      6. Creating a keyboard-driven mini piano musical game
      7. 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
        5. Have a go hero
      8. Adding additional features to the mini piano game
        1. Adjusting the music volume according to the player
      9. 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
      10. Time for action – adding functionalities to record the music level data
        1. What just happened?
      11. Adding touch support
      12. Time for action – indicating a game over event in the console
        1. What just happened?
      13. Handling the audio event in playback complete events
      14. Time for action – indicating a game over event in the console
        1. What just happened?
        2. Handling audio events
        3. Have a go hero
      15. Summary
    14. 7. Saving the Game's Progress
      1. Storing data 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?
          1. Counting time
        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 associative 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 when they break 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
      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. Caching the game for offline access
      12. Time for action – adding the AppCache Manifest
        1. What just happened?
        2. The AppCache file
      13. Summary
    15. 8. Building a Multiplayer Draw-and-Guess Game with WebSockets
      1. Installing a WebSocket server
        1. Installing the Node.js WebSocket server
      2. Time for action – installing Node.js
        1. What just happened?
        2. Creating a WebSocket server to send connection count
      3. Time for action – running a WebSocket server
        1. What just happened?
        2. Initializing the WebSocket server
        3. Listening to the connection event on the server side
        4. Creating a client that connects to a WebSocket server and getting the total connections count
      4. Time for action – showing the connection count in a WebSocket application
        1. What just happened?
        2. Establishing a WebSocket connection
        3. WebSocket client events
        4. Sending a message to all connected browsers
      5. Time for action – sending total count to all users
        1. What just happened?
        2. Defining class and instant instance methods
        3. Handling a newly connected user
        4. Exporting modules
        5. Sending messages to the client
      6. Building a chatting application with WebSockets
        1. Sending a message to the server
      7. 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
      8. Sending every received message on the server side to create a chat room
      9. Time for action – sending messages to all connected browsers
        1. What just happened?
        2. Comparing WebSockets with polling approaches
      10. Making a shared drawing whiteboard with Canvas and WebSockets
        1. Building a local drawing sketchpad
      11. Time for action – making a local drawing whiteboard with the Canvas
        1. What just happened?
          1. Drawing in the Canvas
        2. Have a go hero – drawing with colors
        3. Sending the drawing to all the connected browsers
      12. 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 sending
        4. Recreating the drawing lines after receiving them from other clients
      13. Building a multiplayer draw-and-guess game
      14. Time for action – building the draw-and-guess game
        1. What just happened?
        2. Inheriting the Room class
        3. Controlling the game flow of a multiplayer game
        4. Room and Game Room
        5. Improving the game
          1. Improving the styles
          2. Storing drawn lines on each game
        6. Have a go hero
          1. Improving the answer checking mechanism
        7. Have a go hero
      15. Summary
    16. 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. Setting the gravity of the world
        4. Setting Box2D to ignore the sleeping 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. Pixel per meter
        3. Creating a shape with a fixture
        4. Creating a body
        5. Setting the bouncing effect with the restitution property
      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?
      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 a 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. Clearing Force
        4. Understanding the difference between ApplyForce and ApplyImpulse
        5. Have a go hero
        6. Adding ramps to our game environment
      17. Time for action – creating the world with ramps
        1. What just happened?
        2. Have a go hero
      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
      22. Adding a level support to our car game
      23. Time for action – loading the game with levels data
        1. What just happened?
        2. Have a go hero
      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 in every frame according to the state of its physics body
        4. Rotating and translating an image in the canvas
        5. Have a go hero
      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. Adding touch support for tablets
      29. Time for action – adding touch support
        1. What just happened?
          1. Controlling the viewport scale
          2. Touch-specific buttons
      30. Summary
    17. 10. Deploying HTML5 Games
      1. Preparing the deploying materials
      2. Putting the game on the Web
      3. Hosting the node.js server
      4. Deploying as a mobile web app in the home screen
      5. Time for action – adding a meta tag for a mobile web app
        1. What just happened?
      6. Building an HTML5 game into a Mac OS X app
      7. Time for action—putting the HTML5 games into a Mac app
        1. What just happened?
      8. Building an HTML5 game into a mobile app with the Web View
      9. Building with the PhoneGap build
      10. App store's reviewing process
      11. Summary
    18. A. Pop Quiz Answers
      1. Chapter 2, Getting Started with DOM-based Game Development
        1. Preparing the HTML documents for a DOM-based game
        2. Pop quiz
        3. Setting up the Ping Pong game elements
        4. Pop quiz
      2. Chapter 3, Building a Card-matching Game in CSS3
        1. Storing internal custom data with an HTML5 custom data attribute
        2. Pop quiz
        3. Accessing custom data attribute with jQuery
        4. Pop quiz
      3. Chapter 4, Building the Untangle Game with Canvas and the Drawing API
        1. Drawing a circle in the Canvas
        2. Pop quiz
        3. Using mouse events to interact with objects drawn in the Canvas
          1. Detecting mouse events in circles in the Canvas
        4. Pop quiz
          1. Clearing the Canvas
        5. Pop quiz
      4. Chapter 5, Building a Canvas Game's Masterclass
        1. Drawing text in the Canvas
        2. Pop quiz – drawing text in the Canvas
        3. Drawing images in the Canvas
        4. Pop quiz – styling a Canvas background
      5. Chapter 6, Adding Sound Effects to Your Games
        1. Adding a sound effect to the Play button
        2. Pop quiz – using the audio tag
      6. Chapter 7, Saving the Game's Progress
        1. Saving the entire game progress
        2. Pop quiz – using local storage
    19. Index

Product information

  • Title: HTML5 Game Development by Example : Beginner's Guide - Second Edition
  • Author(s): Makzan
  • Release date: June 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781785287770