HTML5 Games Creating Fun with HTML5, CSS3, and WebGL Jacob Seidelin A John Wiley and Sons, Ltd, Publication This edition first published 2012 © 2012 John Wiley and Sons, Ltd Registered office John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com. The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988. All rights reserved. No Part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and prod- uct names used in this book are trade names, service marks, trademarks or registered trademarks of their respective own- ers. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought. Trademarks: Wiley and the John Wiley & Sons, Ltd logo are trademarks or registered trademarks of John Wiley and Sons, Ltd and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd is not associated with any product or vendor mentioned in the book. 978-1-119-97508-3 A catalogue record for this book is available from the British Library. ISBN 978-1-119-97508-3 (paperback); ISBN 978-1-119-97634-9 (ebook); 978-1-119-97632-5 (ebook); 978-1-119-97633-2 (ebook) Set in 10/12.5 Chaparral Pro by Wiley Composition Services Printed in the United States by Bind-Rite Publisher’s Acknowledgements Some of the people who helped bring this book to market include the following: VP Consumer and Technology Publishing Senior Project Coordinator Director Kristie Rees Michelle Leete Graphics and Production Specialists Associate Director–Book Content Noah Hart Management Andrea Hornberger Martin Tribe Jennifer Mayberry Associate Publisher Quality Control Technician Chris Webb Melissa Cossell Assistant Editor Proofreading and Indexing Ellie Scott The Well-Chosen Word Development Editor Potomac Indexing, LLC Brian Herrmann Copy Editor Charles Hutchinson Technical Editor Andrew Woolridge Editorial Manager Jodi Jensen Senior Project Editor Sara Shlaer Editorial Assistant Leslie Saxman Associate Marketing Director Louise Breinholt Marketing Executive Kate Parrett About the Author JACOB SEIDELIN (COPENHAGEN) is a freelance web developer with 10 years of experience working withbackend programming, graphics design, and front-end technology. When not working with clients 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 http://www.nihilogic.dk/. Acknowledgments I’d like to acknowledge a few people who helped in the making of this book. First of all, I want to thank Chris Webb at Wiley for taking the initiative and making this book possible. Thanks to my editors Linda Morris, Brian Herrmann, and Charles Hutchinson for improving all aspects of the text, and to Andrew Wooldridge, my technical editor, whose keen eye for technical details kept me on my toes. It has been a pleasure working with all of you. I’d also like to extend my gratitude to the web development community in general for the never-ending inspiration and motivation. The same goes for the hard-working people at W3C, Khronos, and other organizations trying to make the Web a better place through open standards. Keep fighting the good fight. Finally, thanks to my beautiful Ulla for the endless support and patience. Thank you for believing. Contents Introduction . 1 Part 1 CHAPTER 1 Gaming on the Web . 7 Tracing the History of HTML5 . 8 Using HTML5 for Games . 9 Canvas . 9 Audio . 11 WebSockets . 12 Web Storage . 13 WebGL . 14 HTML5 is (not) a Flash killer . .. 14 Creating Backward Compatibility . 15 Feature detection . .. 15 Using the Modernizr Library . 15 Filling the gaps with polyfills . 17 Building a Game . 18 Summary . 19 CHAPTER 2 Taking the First Steps . 21 Understanding the Game . 22 Swapping jewels . 22 Matching three . 22 Level progression . .. 23 Identifying Game Stages . 23 Splash screen . 23 Main menu . 24 Playing the game . 24 High score . .. 26 Creating the Application Skeleton . 26 Setting up the HTML . 27 Adding a bit of style . 28 vi HTML5 GAMES CREATING FUN WITH HTML5, CSS3, AND WEBGL Loading the scripts . 30 Debugging web applications . 31 Creating a DOM helper module . 32 Creating the game module . 33 Activating the splash screen . 34 Creating the Splash Screen . 35 Working with web fonts . 35 Styling the splash screen . 37 Summary . 39 CHAPTER 3 Going Mobile . 41 Developing Mobile Web Applications . 42 Write once, read many . 43 The challenges of mobile platforms . 43 Handling User Input on Mobile Devices . 43 Keyboard input . 44 Mouse versus touch . 45 Adapting to Small Screen Resolutions . 45 Creating scalable layouts . 47 Controlling the viewport . 49 Disabling user scaling . 50 Creating Different Views . 50 Creating the main menu . .. 51 Adding screen modules . 52 Using CSS media queries . 57 Detecting device orientation . 58 Adding a mobile style sheet . 59 Developing for iOS and Android Devices . 62 Placing web applications on the home screen . 63 Detecting standalone apps . 64 Extending Modernizr . 64 Making a special splash screen . .. 65 Adding an application icon . 68 Adding a startup image . 70 Styling the status bar . 71 TABLE OF CONTENTS vii Getting the browser out of the way . 71 Disabling overscroll . 71 Hiding the address bar . 73 Disabling default browser behavior . .. 74 Debugging Mobile Web Applications . .. 75 Enabling the Safari debugger . 75 Accessing the Android log . 77 Summary . 78 Part 2 CHAPTER 4 Building the Game . 81 Creating the Game Board Module . 82 Initializing the game state . 83 Initializing the board . 84 Using asynchronous functions . .. 85 Filling the initial board . 86 Implementing the Rules . 89 Validating swaps . 89 Detecting chains . 92 Removing chained jewels . 92 Creating new jewels . 94 Awarding points . 95 Refilling the grid . 97 Swapping jewels . 100 Summary . 102 CHAPTER 5 Delegating Tasks to Web Workers . 103 Working with Web Workers . 104 Limitations in workers . 105 No shared state . ..