HTML5 Games Creating Fun with HTML5, CSS3, and WebGL Jacob Seidelin
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 product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. 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 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 Id 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. Id 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. Publishers Acknowledgements Some of the people who helped bring this book to market include the following: VP Consumer and Technology Publishing Director Michelle Leete Associate DirectorBook Content Management Martin Tribe Associate Publisher Chris Webb Assistant Editor Ellie Scott Development Editor 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 Senior Project Coordinator Kristie Rees Graphics and Production Specialists Noah Hart
Andrea Hornberger
Jennifer Mayberry Quality Control Technician Melissa Cossell Proofreading and Indexing The Well-Chosen Word Potomac Indexing, LLC
Introduction All this is done in HTML5, by the way! exclaimed Steve Jobs, the mind and face of the Apple success story, as he walked the audience through the new HTML5-powered ad system at the iPhone OS 4.0 Keynote, receiving cheers, laughs, and applause in return. The recent developments in open, standards-based web technologies are moving the web forward at an increasing pace, and Apples embrace of HTML5, including the blocking of Flash on all iDevices, is just another symbol of the power of this movement.
Although Apples love for HTML5 might in part be fueled by business motives, it is clear that the open web is on the move and exciting things are happening on an almost daily basis, making it an exciting time for web and game developers alike. The world of web and game development wasnt always this exciting, however. Building games for the browser could be a frustrating experience and has traditionally meant having to choose between using feature-rich plugin-based technologies or settling for a more low-tech approach, trying to fit the square peg of HTML and JavaScript into the round hole of game development. Disagreeing or downright broken implementations of various standards have only made the consistent and predictable environment of, for instance, Flash more appealing. By opting for plugins like Flash, developers and game designers gain access to frameworks that are suitable for advanced game development, featuring dynamic graphics, sounds, and even 3D, but doing so also disconnects the game from the technologies surrounding it. Although technologies such as Flash, Java, and Silverlight all have means to communicate with the rest of the page, they remain isolated objects with limited capabilities for mixing with the surrounding content.
In contrast, using HTML, JavaScript, and CSS the native building blocks of the web means your game will fit naturally within the context of a web page, but with them comes other compromises, not least of which is a lack of suitable elements and APIs. When the first editions of the HTML standard were published in the mid-1990s, it is doubtful that anyone had rich Internet applications in mind, and HTMLs document-centric nature meant that it was much more suitable for marking up pages of text and images than for application and game development. Even as these pages slowly became more and more interactive as JavaScript and the Document Object Model (DOM) evolved, graphics were still limited to static images and styled HTML elements, and audio was pretty much nonexistent. Only recently have the specifications for HTML5, CSS3, and other related standards evolved in the direction of actual applications, allowing developers to build experiences more akin to desktop applications than the traditional page-based web site. Naturally, these developments also apply to web games, and many of the recent advancements are a perfect fit for games and other interactive entertainment applications. Who this book is for HTML, JavaScript, and CSS are no longer limited to building web sites; web apps can be deployed on the web, as desktop widgets, and on mobile devices and many other places.