HTML5 Game Development by Example Beginner's Guide Second Edition
Total Page:16
File Type:pdf, Size:1020Kb
http://freepdf-books.com HTML5 Game Development by Example Beginner's Guide Second Edition Make the most of HTML5 techniques to create exciting games from scratch Makzan BIRMINGHAM - MUMBAI http://freepdf-books.com HTML5 Game Development by Example Beginner's Guide Second Edition Copyright © 2015 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: August 2011 Second edition: June 2015 Production reference: 2250615 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78528-777-0 www.packtpub.com http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com Credits Author Copy Editors Makzan Ameesha Green Jasmine Nadar Reviewers Lauri Hosio Project Coordinator Dan Nagle Shweta H Birwatkar Matt Palmerlee Leonardo Risuleo Proofreader Safis Editing Commissioning Editor Dipika Gaonkar Indexer Tejal Daruwale Soni Acquisition Editors Vivek Anantharaman Production Coordinator Manu Joseph Sam Wood Cover Work Content Development Editor Manu Joseph Arwa Manasawala Technical Editor Menza Mathew http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com About the Author Makzan focuses on the fields of 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 three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net. I wish to thank my wife, Candy, for her patience and understanding. I would also like to thank the entire team at Packt Publishing. The book would not have been possible without their help. I thank all the reviewers for providing useful comments from which I have learned a lot. http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com About the Reviewers Lauri Hosio has been making games since he discovered QBASIC with his friends in elementary school. Professionally, he's worked with web and mobile games for over 7 years. Previously, he worked at Rovio as the acting lead game programmer on Angry Birds Friends. At other companies, he has also worked on web-based MMO games and general web development. Before HTML5, he made independent web games with Flash that were played by millions of players. Some of his games have been published by AddictingGames and ArmorGames. Lauri currently works in Kansas City, Missouri, on mobile games and full-stack web development. Dan Nagle has, since graduating as a valedictorian in computer engineering from the Mississippi State University in 2003, written and published apps for Android, Windows, Mac, Linux, iOS, numerous web apps, network servers, and pure embedded C. He is the author of the book, HTML5 Game Engines: App Development and Distribution, which was published by CRC Press. He has also written articles and spoken at conferences about developing websites and HTML5-based games. For about 4 years, he owned and operated a web company that focused on website hosting and custom game development. Before that, he was an electrical engineer who developed embedded systems. Currently, he is a senior software engineer who writes control software, web interfaces, and mobile apps for network devices that distribute HD video. He can be reached through his website at http://DanNagle.com/. http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com Matt Palmerlee has been developing software professionally since 2001 and has a passion for JavaScript and HTML5 game development. He built Astriarch, an open source multiplayer space strategy game, using HTML5 and Node.js. Matt has developed other HTML5 games, which were published by Mastered Software, his software development consulting company. Matt occasionally blogs about interesting aspects of software development and HTML5 games on his personal website at http://mattpalmerlee.com/. Leonardo Risuleo is the owner and creative director of Small Screen Design. He is a designer and developer with several years of experience in mobile, new media, and user experience. Leonardo is a highly dedicated professional, and he's passionate about what he does. He started his career in 2003, and in the last few years, he has worked on a variety of different mobile and embedded platforms for a number of well-known brands and studios. Leonardo designs, prototypes, and develops mobile applications, games, widgets, and websites. From 2008 to 2010, he had the honor of being the Nokia Developer Champion, a recognition and reward program for top mobile developers worldwide. In 2008, Leonardo formally founded Small Screen Design (https://www.smallscreendesign.com), a design and development studio focused on mobile design and user experience. In 2015, he became Digital Champion—an ambassador for the Digital Agenda—for Squillace, to help every European become digital. http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. 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 https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read 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 a 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. http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com Table of Contents Preface xi Chapter 1: Introducing HTML5 Games 1 Discovering new features in HTML5 2 Canvas 2 Audio 2 Touch Events 2 GeoLocation 2 WebGL 3 WebSocket 3 Local storage 3 Offline applications 4 Discovering new features in CSS3 4 CSS3 transition 5 CSS3 transform 6 CSS3 animation 6 The benefit of creating HTML5 games 7 Free and open standards 7 Support for multiple platforms 7 Native app-rendering performance in particular scenarios 8 Breaking the boundary of usual browser games 8 Building HTML5 games 9 What others are playing with HTML5 9 Coca-Cola's Ahh campaign 9 Asteroid-styled bookmarklet 10 X-Type 10 Cursors.io 11 [ i ] http://freepdf-books.comwww.itbooksh ub.com ||||||||||||||||||||||||| ||||||||||||||||| www.cncmanu al.com Table of Contents What we are going to create in this book 12 Preparing the development environment 13 Summary 13 Chapter 2: Getting Started with DOM-based Game Development 15 Preparing the HTML documents for a DOM-based game 16 Time for action – installing the jQuery library 16 New HTML5 doctype 18 Header and footer 18 The best practice to place the JavaScript code 19 Choosing the jQuery file 19 Running jQuery inside a scope 20 Running our code after the page is ready 20 Downloading the image assets 21 Setting up the Ping Pong game elements 22 Time for action – placing Ping Pong game elements in the DOM 22 Using jQuery 25 Understanding basic jQuery selectors 26 Understanding the jQuery CSS function 27 Manipulating game elements in DOM with jQuery 27 Understanding the behavior of absolute position 28 Declaring global variables in a better way 29 Getting mouse input 29 Time for action – moving DOM objects by mouse input 30 Getting the mouse event 32 RequestAnimationFrame 32 Checking the console window 32 Moving a DOM object with JavaScript Interval 33 Time for action – Moving the ball with JavaScript Interval 34 Creating a JavaScript timer with the setInterval function