Learn HTML5 by Creating Fun Games Learn one of the most popular markup languages by creating simple yet fun games Rodrigo Silveira BIRMINGHAM - MUMBAI Learn HTML5 by Creating Fun Games Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: June 2013 Production Reference: 1190613 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-602-9 www.packtpub.com Cover Image by Duraid Fatouhi ([email protected]) Credits Author Project Coordinator Rodrigo Silveira Apeksha Chitnis Reviewer Proofreaders Thomas Mak Aaron Nash Bernadette Watkins Acquisition Editor Andrew Duckworth Indexer Hemangini Bari Commissioning Editor Shreerang Deshpande Graphics Ronak Dhruv Lead Technical Editor Valentina Dsilva Madhuja Chaudhari Production Coordinator Technical Editors Nilesh R. Mohite Veena Pagare Priya Singh Cover Work Sampreshita Maheshwari Nilesh R. Mohite About the Author Rodrigo Silveira is a web engineer at Deseret Digital Media. His responsibilities include back-end system development, tools, and maintenance, front-end application development and design, and more recently, he's been involved in mobile development of various products on the Android platform. He received his Bachelor's of Science in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah. His fascination for web development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together). About the Reviewer Thomas Mak, also known as Makzan, is a developer with a specialty in web development and game design. He has over ten years of experience building digital products, including real-time multiplayer interaction games and iOS applications. He is currently a founder of game development learning company, 42games (http://42games.net), where he makes game development tutorials and online learning resources. He has written two books with Packt publishing and one screencast series for building Flash Virtual World and making games with HTML5 and related web standards. I would like to thank my family and my wife, Candy Wong, for supporting all my writings. www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: An Overview of HTML5 7 What is HTML? 7 A brief history of HTML 8 The evolution of the World Wide Web 8 What is HTML5? 9 HTML5 – the next step in the evolution 9 HTML5 is not a single feature 10 More semantic document structure 10 A warning about performance 15 Native features of the browser 16 Automatic form validation 18 New input types 19 Telephone-friendly hyperlinks 19 CSS-based DOM selectors 19 Text-to-speech 20 CSS3 20 Separation of concerns 20 Reusability of visual design 21 Ease of maintenance 22 Scalability 22 The evolution of CSS 22 Experimental features and vendor prefixes 23 CSS preprocessors 24 CSS3 modules 25 Style attributes 26 Selectors 26 Colors 27 Media queries 28 Table of Contents JavaScript APIs 31 New JavaScript APIs 31 The Web as a platform 32 The Open Web 33 HTML5 – a game changer 34 Learning HTML5 through game development 35 Summary 36 Chapter 2: HTML5 Typography 39 The game 39 Game elements 42 The options widget 43 The game title 43 Boat 44 Sky 44 Waves 44 Tracks 44 Players 44 The main container 45 Words to write 45 Words written 45 The message container 45 The message title 45 The new champion form 46 Leaderboard 46 Game controls 47 HTML 48 The web form 48 Data attributes 51 CSS 51 Web fonts 51 Transitions 52 Animations 53 The text shadows 56 The box shadows 57 The border radius 58 JavaScript 59 Query selectors 60 API usage 60 Web forms 60 New input types 60 Form validation 75 Used in the game 77 Data attributes 78 [ ii ] Table of Contents Used in the game 80 Query selectors 82 Used in the game 85 Web fonts 85 Transitions 86 Animations 89 The text shadow 91 The box shadow 92 The border radius 93 The code 94 The HTML structure 94 JavaScript and logic 95 Summary 100 Chapter 3: Understanding the Gravity of HTML5 101 Browser compatibility 101 Supporting different browsers 102 HTML5 libraries and frameworks 103 jQuery 103 Google Web Toolkit 105 Supporting browsers with limited HTML5 features 106 Gracefully degrade 106 Polyfills 109 Modernizr 109 The game 110 Code structure 111 API usage 113 Web audio 113 Scalable Vector Graphics (SVG) 115 Drag-and-drop 117 Web audio 119 How to use it 120 SVG 122 How to use it 126 Drag-and-drop 136 How to use it 137 Summary 139 Chapter 4: Using HTML5 to Catch a Snake 141 The game 142 API usage 143 How to use it 143 Typed arrays 147 How to use it 149 [ iii ] Table of Contents ArrayBuffer and ArrayBufferView 150 Typed array view types 153 Canvas 154 How to use it 155 clearRect 157 Fill and stroke 158 Lines 159 Shapes 161 Text 162 Transformations 162 Drawing images 163 Manipulating pixels 166 Web workers 169 How to use it 169 Offline application cache 173 How to use it 173 The code 176 Summary 182 Chapter 5: Improving the Snake Game 183 The game 184 API usage 185 Web messaging 185 How to use it 185 Web storage 192 Local storage 194 Session storage 196 IndexedDB 197 IDBFactory 199 IDBOpenDBRequest 200 IDBTransaction 202 readwrite 203 readonly 203 versionchange 203 Getting elements 204 Deleting elements 209 The code 211 Saving the high score 212 Taking screenshots of the game 213 Summary 216 Chapter 6: Adding Features to Your Game 219 Advanced HTML5 APIs 220 WebGL 221 Hello, World! 221 [ iv ] Table of Contents Web sockets 231 The connection 233 The server-side code 234 The client-side code 234 Video 235 Attributes 238 Events 238 Geolocation 243 A Google Maps example 247 Upcoming CSS features 249 Programming in the bleeding edge 249 CSS shaders 251 Using custom filters 253 CSS columns 259 The column rule 261 Column breaks 262 CSS regions and exclusions 264 Exclusions 268 Defining shapes 274 Summary 274 Chapter 7: HTML5 and Mobile Game Development 275 Desktop versus mobile 276 Major implementation considerations 277 Screen size and orientation 277 Computing power 278 Battery life 279 Browser differences 279 Best practices 280 Degrade gracefully and enhance progressively 280 Finger-friendly design 283 Save battery life 284 Plan for offline 285 Offering a desktop version 285 Understanding media queries 285 width 288 height 290 device-width 291 device-height 292 orientation 292 aspect-ratio 293 device-aspect-ratio 295 color 298 color-index 299 monochrome 299 [ v ] Table of Contents resolution 300 scan 301 grid 301 Understanding touch events 302 touchstart 303 touches 303 changedTouches 303 targetTouches 303 touchend 304 touchmove 304 The touch object 305 identifier 305 screenX 307 screenY 307 clientX 307 clientY 308 pageX 308 pageY 308 radiusX 309 radiusY 310 rotationAngle 313 force 313 target 314 The game 314 Code structure 316 /css 316 /img 318 /js 319 /components 319 /entities 328 /widgets 331 Canvas.js 332 EnemyManager.js 335 GameLoop.js 338 PhysicsManager.js 339 Vec2.js 340 main.js 340 index.html 343 Mobile optimizations 343 Combine resources 344 Track touches by IDs 344 Use CSS animations with caution 345 Use separate canvases for each game layer 346 Use image atlases 347 Summary 348 Index 349 [ vi ] Preface If you would like to write a software that can reach billions of people world- wide, then this book will help you get started on that journey.