O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Book Description

HTML5 Games shows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

Topics include:

  • Dealing with backwards compatibility

  • Generating level data

  • Making iOS and Android web apps

  • Taking your game offline

  • Using Web Workers

  • Persistent Game Data

  • Drawing with Canvas

  • Capturing player input

  • Creating 3D graphics with WebGL

  • Textures and lighting

  • Sound with HTML5 Audio

  • And more...

    Table of Contents

      1. Introduction
        1. Who this book is for
        2. What this book is about
      2. Part I: Getting Started with HTML5 Games
        1. Chapter 1: Gaming on the Web
          1. Tracing the History of HTML5
          2. Using HTML5 for Games
            1. Canvas
            2. Audio
            3. WebSockets
            4. Web Storage
            5. WebGL
            6. HTML5 and Flash
          3. Creating Backward Compatibility
            1. Using feature detection
            2. Filling the gaps with polyfills
          4. Building a Game
          5. Summary
        2. Chapter 2: Taking the First Steps
          1. Understanding the Game
            1. Swapping jewels
            2. Matching three
            3. Level progression
          2. Identifying Game Stages
            1. Splash screen
            2. Main menu
            3. Playing the game
            4. High score
          3. Creating the Application Skeleton
            1. Setting up the HTML
            2. Adding a bit of style
            3. Loading the scripts
            4. Creating a DOM helper module
          4. Creating the Splash Screen
            1. Working with web fonts
            2. Styling the splash screen
          5. Summary
        3. Chapter 3: Going Mobile
          1. Developing Mobile Web Applications
            1. Write once, read many
            2. The challenges of mobile platforms
          2. Handling User Input on Mobile Devices
            1. Keyboard input
            2. Mouse versus touch
          3. Adapting to Small Screen Resolutions
            1. Creating scalable layouts
            2. Controlling the viewport
            3. Disabling user scaling
          4. Creating Different Views
            1. Creating the main menu
            2. Adding screen modules
            3. Using CSS media queries
            4. Detecting device orientation
            5. Adding a landscape style sheet
          5. Developing for iOS and Android Devices
            1. Placing web applications on the home screen
            2. Getting the browser out of the way
          6. Debugging Mobile Web Applications
            1. Enabling the Safari debugger
            2. Debugging on Android
          7. Building Native Web Applications
            1. PhoneGap
          8. Future Mobile Platforms
          9. Summary
      3. Part II: Creating the Basic Game
        1. Chapter 4: Building the Game
          1. Creating the Game Board Module
            1. Initializing the game state
            2. Filling the initial board
          2. Implementing the Rules
            1. Validating swaps
            2. Detecting chains
            3. Refilling the grid
            4. Swapping jewels
          3. Summary
        2. Chapter 5: Delegating Tasks to Web Workers
          1. Working with Web Workers
            1. Limitations in workers
            2. What workers can do
          2. Using Workers
            1. Sending messages
            2. Receiving messages
            3. Catching errors
            4. Shared workers
            5. A prime example
          3. Using Web Workers in Games
            1. Creating the worker module
            2. Keeping the same interface
          4. Summary
        3. Chapter 6: Creating Graphics with Canvas
          1. Ways to Display Graphics on the Web
            1. Bitmap images
            2. SVG graphics
            3. The canvas element
            4. When to choose canvas
          2. Drawing with canvas
            1. Drawing shapes and paths
            2. Using advanced strokes and fill styles
            3. Using transformations
            4. Adding text, images, and shadows
            5. Managing the state stack
            6. Drawing the HTML5 logo
            7. Compositing
          3. Accessing Image Data
            1. Retrieving pixel values
            2. Updating pixel values
            3. Exporting image file data
            4. Understanding security restrictions
            5. Creating pixel-based effects
          4. Summary
        4. Chapter 7: Creating the Game Display
          1. Tracking Load Progress
            1. Adding a progress bar
          2. Building the Game Screen
            1. Drawing the board with canvas
            2. Exiting the game
            3. Pausing the game
          3. Summary
        5. Chapter 8: Interacting with the Game
          1. Capturing User Input
            1. Mouse events on touch devices
            2. The virtual keyboard
            3. Touch events
            4. Input events and canvas
            5. Using gamepads and controllers
          2. Building the Input Module
            1. Handling input events
            2. Implementing game actions
            3. Binding inputs to game functions
          3. Summary
        6. Chapter 9: Animating Game Graphics
          1. Making the Game React
            1. Animation timing
            2. Animating the cursor
            3. Animating game actions
          2. Adding Points and Time
            1. Creating the UI elements
            2. Creating the game timer
            3. Pausing the game
            4. Awarding points
            5. Game over
          3. Summary
      4. Part III: Adding 3D and Sound
        1. Chapter 10: Creating Audio for Games
          1. HTML5 Audio
            1. Detecting audio support
            2. Understanding the audio format wars
            3. Finding sound effects
          2. Using the audio Element
            1. Controlling playback
            2. Using audio on mobile devices
          3. Working with Audio Data
            1. Using the Web Audio API
          4. Building the Audio Module
            1. Preparing for audio playback
            2. Playing sound effects
            3. Stopping sounds
            4. Cleaning up
          5. Adding Sound Effects to the Game
            1. Playing audio from the game screen
          6. Summary
        2. Chapter 11: Creating 3D Graphics with WebGL
          1. 3D for the Web
            1. Where you can use WebGL
            2. Getting started with WebGL
            3. Debugging WebGL
            4. Creating a helper module
          2. Using Shaders
            1. Variables and data types
            2. Using shaders with WebGL
            3. Uniform variables
            4. Varying variables
          3. Rendering 3D Objects
            1. Using vertex buffers
            2. Using index buffers
            3. Using models, views, and projections
            4. Rendering
            5. Loading Collada models
          4. Using Textures and Lighting
            1. Adding light
            2. Adding per-pixel lighting
            3. Creating textures
          5. Creating the WebGL display
            1. Loading the WebGL files
            2. Creating the jewel objects
            3. Setting up WebGL
            4. Rendering jewels
            5. Animating the jewels
          6. Using Third-Party WebGL Engines
          7. Summary
      5. Part IV: Local Storage and Multiplayer Games
        1. Chapter 12: Local Storage and Caching
          1. Storing Data with Web Storage
            1. Using the storage interface
          2. Building a storage module
          3. Making the Game State Persistent
            1. Saving the game data
          4. Creating a High Score List
            1. Building the high score screen
            2. Storing the high score data
            3. Displaying the high score data
          5. Application Cache
            1. The cache manifest
          6. Summary
        2. Chapter 13: Going Online with WebSockets
          1. Using WebSockets
            1. Connecting to servers
            2. Communicating with WebSockets
          2. Using Node on the Server
            1. Installing Node
            2. Creating an HTTP server with Node
            3. Creating a WebSocket chat room
          3. Summary