Table Of ContentHTML5 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
