HTML5 Game Development HOTSH T Build interactive games with HTML, DOM, and the CreateJS game library Makzan BIRMINGHAM - MUMBAI HTML5 Game Development HOTSH T Copyright © 2014 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: July 2014 Production reference: 1010714 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-546-6 www.packtpub.com Cover image by Thomas Mak ([email protected]) Credits Author Copy Editors Makzan Gladson Monteiro Adithi Shetty Reviewers Maxime AILLOUD Project Coordinator Hatem Alimam Shiksha Chaturvedi Othree Kao Willian "PotHix" Molinari Proofreaders Simran Bhogal Kevin Roast Maria Gould Tim Severien Paul Hindle Roberto Ulloa Commissioning Editor Indexers Erol Staveley Mehreen Deshmukh Rekha Nair Acquisition Editors Saleem Ahmed Graphics Antony Lowe Abhinash Sahu Rebecca Pedley Luke Presland Production Coordinator Manu Joseph Content Development Editor Amey Varangaonkar Cover Work Manu Joseph Technical Editors Mrunmayee Patil Aman Preet Singh About the Author Makzan focuses on web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites. He has written two books and one video course on building a Flash virtual world and creating games with HTML5 and the latest web standards. He is currently teaching courses in Hong Kong and Macao SAR. I would like to thank my wife, Candy Wong, for supporting all my writings. A book is not a one-man effort. This book wouldn't have happened without the help of the Packt Publishing team and the reviewers. Thanks to all the editors and technical reviewers for improving the book and making sure it happened. About the Reviewers Maxime AILLOUD was always involved in game development along with his study from the time he was a child. He wasn't aware of web development at first, but it wasn't so far along the road as some of his colleagues created an association in Lyon to promote game development. Organizing a game jam, 48h of game creation, was one of their goals. It was enough for him to get into game development. For now, it's just a hobby, but maybe one day, it'll be a part of his job. Big thanks to Packt Publishing for letting me help them review this book; hope it suits their needs. Hatem Alimam is a senior developer at Engineering Ingegneria Informatica. He has been involved in making the "today" website since he was 16. He has reviewed several books based on various web technologies, and he's also interested in open source projects. In his free time, you will find him on http://stackoverflow.com/. You can find more details about him at http://hatemalimam.com/. Othree Kao is a frontend engineer at HTC, Taiwan. He has played with and studied web standards for more than 10 years. He has developed several Vim plugins such as vim and javascript-libraries-syntax.vim, which has made an F2E's life happier. He is also a very active web standards evangelist in Taiwan. He has given speeches at COSCUP, OSDC, and JSDC. Besides this, he has also worked as a volunteer photographer at these conferences. Willian Molinari, also known as PotHix, is a Brazilian developer who works with languages such as Ruby, Python, a bit of Go, and some others that may appear as the correct tool for the job. He is one of the main organizers of Sao Paulo Ruby Users Group (Guru-SP), created in 2008. In his free time, he likes to play with different things, such as game development with JavaScript and HTML5 and quantitative finance with Python. He has developed a game called Skeleton Jigsaw that is open source, and the code for this is available on the Plaev GitHub account (http://github.com/plaev). Tim Severien is an ambitious frontend developer from the Netherlands. In his spare time, he assists his fellow developers and writes and fiddles with the newest features available. Occasionally, he writes for flippinawesome.org. Roberto Ulloa has a diverse academic record in multiple disciplines within the field of computer science. He obtained an MSc from the University of Costa Rica and has also taught programming and computer networking there. He then spent two years doing PhD-level research on cultural complexity at the CulturePlex Lab of the University of Western Ontario. He loves travelling and enjoys an itinerant life, living among different cultures and environments. He loves nature and has spent many months volunteering in Central and South America. Currently, he can be found somewhere in South East Asia, wandering in a new place or settling down for a few weeks in a comfortable town to get some work done. Indeed, at one of his stops, he wrote the book Kivy: Interactive Applications in Python, Packt Publishing, which was published in 2013, for which he is very grateful. He earns his living as a web developer in Python/Django and PHP/Wordpress. Also, he tries to have as much free time as possible to collaborate with different research colleagues; work on his own projects, which includes his blog (http://robertour.com) ; or acquire new knowledge through reading books or online courses. He constantly worries that the Internet has already become aware of itself, and we are not able to communicate with it because of the improbability of it being able to provide information in Spanish or any of the 6,000 odd human languages that exist on the planet. 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? f Fully searchable across every book published by Packt f Copy and paste, print and bookmark content f 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 Project 1: Building a CSS Quest Game 7 Mission briefing 7 Creating the HTML structure 9 Managing the game scene 14 Representing the quest composition 24 Placing the patterns on the deck 31 Selecting the pattern 35 Comparing the player and quest composition 37 Showing different quests 42 Adding a countdown timer to the game 43 Mission accomplished 46 Hotshot challenges 46 Project 2: Card Battle! 47 Mission briefing 47 Creating the game scenes 49 Creating a 3D card-flipping effect 55 Selecting a card 60 Adding a power value to the cards 64 Creating the opponent's card 67 Building the battle animation 69 Adding health points to the game 74 Restarting the game for the next round of battle 78 Mission accomplished 80 Hotshot challenges 80