HTML5 Games

Jacob Seidelin (Copenhagen) is a freelance web developer with 10 years of experience working with both backend programming, graphics design and front-end technology. When not working with clients of all sizes he enjoys JavaScript and HTML5, web game development and generally pushing the limit of what is possible in the browser. The results of his adventures in web development can be witnessed at his website at www.nihilogic.dk

Introduction 1 Who this book is for 2 What this book is about 2 Part I Getting Started with HTML5 Games 5 CHAPTER 1 Gaming on the Web 7 Tracing the History of HTML5 8 Using HTML5 for Games 8 Canvas 9 Audio 11 WebSockets 12 Web Storage 13 WebGL 14 HTML5 and Flash 14 Creating Backward Compatibility 15 Using feature detection 15 Filling the gaps with polyfills 16 Building a Game 16 Summary 17 CHAPTER 2 Taking the First Steps 19 Understanding the Game 20 Swapping jewels 20 Matching three 20 Level progression 20 Identifying Game Stages 21 Splash screen 21 Main menu 22 Playing the game 22 High score 23 Creating the Application Skeleton 24 Setting up the HTML 25 Adding a bit of style 26 Loading the scripts 27 Creating a DOM helper module 31 Creating the Splash Screen 35 Working with web fonts 36 Styling the splash screen 37 Summary 40 CHAPTER 3 Going Mobile 41 Developing Mobile Web Applications 42 Write once, read many 42 Th e challenges of mobile platforms 43 Handling User Input on Mobile Devices 43 Keyboard input 43 Mouse versus touch 44 Adapting to Small Screen Resolutions 45 Creating scalable layouts 46 Controlling the viewport 48 Disabling user scaling 49 Creating Different Views 50 Creating the main menu 50 Adding screen modules 52 Using CSS media queries 56 Detecting device orientation 58 Adding a landscape style sheet 59 Developing for iOS and Android Devices 62 Placing web applications on the home screen 62 Getting the browser out of the way 71 Debugging Mobile Web Applications 73 Enabling the Safari debugger 74 Debugging on Android 76 Building Native Web Applications 77 PhoneGap 77 Future Mobile Platforms 81 Summary 81 Part II Creating the Basic Game 83 CHAPTER 4 Building the Game 85 Creating the Game Board Module 85 Initializing the game state 87 Filling the initial board 90 Implementing the Rules 93 Validating swaps 93 Detecting chains 95 Refilling the grid 100 Swapping jewels 104 Summary 105 CHAPTER 5 Delegating Tasks to Web Workers 107 Working with Web Workers 107 Limitations in workers 108 What workers can do 109 Using Workers 110 Sending messages 111 Receiving messages 111 Catching errors 112 Shared workers 112 A prime example 114 Using Web Workers in Games 117 Creating the worker module 117 Keeping the same interface 120 Summary 125 CHAPTER 6 Creating Graphics with Canvas 127 Ways to Display Graphics on the Web 128 Bitmap images 128 SVG graphics 128 The canvas element 129 When to choose canvas 129 Drawing with canvas 130 Drawing shapes and paths 131 Using advanced strokes and fill styles 142 Using transformations 147 Adding text, images, and shadows 151 Managing the state stack 156 Drawing the HTML5 logo 157 Compositing 164 Accessing Image Data 167 Retrieving pixel values 167 Updating pixel values 168 Exporting image fi le data 170 Understanding security restrictions 171 Creating pixel-based eff ects 171 Summary 174 CHAPTER 7 Creating the Game Display 175 Tracking Load Progress 176 Adding a progress bar 177 Building the Game Screen 180 Drawing the board with canvas 181 Exiting the game 188 Pausing the game 191 Summary 194 CHAPTER 8 Interacting with the Game 195 Capturing User Input 196 Mouse events on touch devices 196 The virtual keyboard 196 Touch events 198 Input events and canvas 204 Using gamepads and controllers 206 Building the Input Module 211 Handling input events 214 Implementing game actions 220 Binding inputs to game functions 226 Summary 233 CHAPTER 9 Animating Game Graphics 235 Making the Game React 236 Animation timing 236 Animating the cursor 241 Animating game actions 243 Adding Points and Time 253 Creating the UI elements 254 Creating the game timer 259 Pausing the game 261 Awarding points 263 Game over 272 Summary 277 Part III Adding 3D and Sound 279 CHAPTER 10 Creating Audio for Games 281 HTML5 Audio 282 Detecting audio support 282 Understanding the audio format wars 283 Finding sound effects 285 Using the audio Element 286 Controlling playback 289 Using audio on mobile devices 293 Working with Audio Data 294 Using the Web Audio API 295 Building the Audio Module 300 Preparing for audio playback 300 Playing sound effects 301 Stopping sounds 303 Cleaning up 304 Adding Sound Effects to the Game 305 Playing audio from the game screen 305 Summary 306 CHAPTER 11 Creating 3D Graphics with WebGL 309 3D for the Web 310 Where you can use WebGL 310 Getting started with WebGL 310 Debugging WebGL 311 Creating a helper module 312 Using Shaders 313 Variables and data types 313 Using shaders with WebGL 319 Uniform variables 325 Varying variables 326 Rendering 3D Objects 327 Using vertex buffers 328 Using index buffers 329 Using models, views, and projections 331 Rendering 336 Loading Collada models 341 Using Textures and Lighting 343 Adding light 344 Adding per-pixel lighting 348 Creating textures 351 Creating the WebGL display 358 Loading the WebGL files 359 Creating the jewel objects 360 Setting up WebGL 362 Rendering jewels 364 Animating the jewels 371 Using Th ird-Party WebGL Engines 375 Summary 376 Part IV Local Storage and Multiplayer Games 377 CHAPTER 12 Local Storage and Caching 379 Storing Data with Web Storage 379 Using the storage interface 380 Building a storage module 384 Making the Game State Persistent 385 Saving the game data 385 Creating a High Score List 389 Building the high score screen 389 Storing the high score data 392 Displaying the high score data 394 Application Cache 395 The cache manifest 396 Summary 399 CHAPTER 13 Going Online with WebSockets 401 Using WebSockets 401 Connecting to servers 402 Communicating with WebSockets 405 Using Node on the Server 407 Installing Node 408 Creating an HTTP server with Node 410 Creating a WebSocket chat room 412 Summary 420 BONUS CHAPTER: APPENDIX A Canvas Reference BC1 The Canvas Element BC1 The 2D Context API BC2 State management BC2 Transformations BC3 Shapes and Paths BC4 Path Objects BC9 Fills and Strokes BC11 Shadows BC13 Images BC14 Text BC15 Compositing BC16 Pixel manipulation BC17 BONUS CHAPTER: APPENDIX B WebGL Reference BC19 WebGL API Reference BC19 Data types BC20 Typed arrays BC21 Context properties BC21 Buffers BC22 Shaders BC23 Program objects BC24 Uniform variables BC25 Vertex attributes BC27 Drawing BC28 Textures BC29 Blending BC33 Stencil buffer BC34 Depth buffer BC35 Render buffers BC35 Frame buffers BC37 Other methods BC39 Parameters BC40 BONUS CHAPTER: APPENDIX C OpenGL ES Shading Language BC47 GLSL ES Language Reference BC47 Data types BC47 Built-in functions BC49 Built-in variables and constants BC57 Index 421