www.it-ebooks.info Learn HTML5 by Creating Fun Games Learn one of the most popular markup languages by creating simple yet fun games Rodrigo Silveira BIRMINGHAM - MUMBAI www.it-ebooks.info Learn HTML5 by Creating Fun Games Copyright © 2013 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: June 2013 Production Reference: 1190613 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-602-9 www.packtpub.com Cover Image by Duraid Fatouhi (duraidfatouhi@yahoo.com) www.it-ebooks.info Credits Author Rodrigo Silveira Reviewer Thomas Mak Acquisition Editor Andrew Duckworth Commissioning Editor Shreerang Deshpande Lead Technical Editor Madhuja Chaudhari Technical Editors Veena Pagare Priya Singh Sampreshita Maheshwari Project Coordinator Apeksha Chitnis Proofreaders Aaron Nash Bernadette Watkins Indexer Hemangini Bari Graphics Ronak Dhruv Valentina Dsilva Production Coordinator Nilesh R. Mohite Cover Work Nilesh R. Mohite www.it-ebooks.info About the Author Rodrigo Silveira is a web engineer at Deseret Digital Media. His responsibilities include back-end system development, tools, and maintenance, front-end application development and design, and more recently, he's been involved in mobile development of various products on the Android platform. He received his Bachelor's of Science in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah. His fascination for web development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together). www.it-ebooks.info About the Reviewer Thomas Mak, also known as Makzan, is a developer with a specialty in web development and game design. He has over ten years of experience building digital products, including real-time multiplayer interaction games and iOS applications. He is currently a founder of game development learning company, 42games ( http://42games.net), where he makes game development tutorials and online learning resources. He has written two books with Packt publishing and one screencast series for building Flash Virtual World and making games with HTML5 and related web standards. I would like to thank my family and my wife, Candy Wong, for supporting all my writings. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les 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 service@packtpub.com 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? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • 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. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: An Overview of HTML5 7 What is HTML? 7 A brief history of HTML 8 The evolution of the World Wide Web 8 What is HTML5? 9 HTML5 – the next step in the evolution 9 HTML5 is not a single feature 10 More semantic document structure 10 A warning about performance 15 Native features of the browser 16 Automatic form validation 18 New input types 19 Telephone-friendly hyperlinks 19 CSS-based DOM selectors 19 Text-to-speech 20 CSS3 20 Separation of concerns 20 Reusability of visual design 21 Ease of maintenance 22 Scalability 22 The evolution of CSS 22 Experimental features and vendor prexes 23 CSS preprocessors 24 CSS3 modules 25 Style attributes 26 Selectors 26 Colors 27 Media queries 28 www.it-ebooks.info Table of Contents [ ii ] JavaScript APIs 31 New JavaScript APIs 31 The Web as a platform 32 The Open Web 33 HTML5 – a game changer 34 Learning HTML5 through game development 35 Summary 36 Chapter 2: HTML5 Typography 39 The game 39 Game elements 42 The options widget 43 The game title 43 Boat 44 Sky 44 Waves 44 Tracks 44 Players 44 The main container 45 Words to write 45 Words written 45 The message container 45 The message title 45 The new champion form 46 Leaderboard 46 Game controls 47 HTML 48 The web form 48 Data attributes 51 CSS 51 Web fonts 51 Transitions 52 Animations 53 The text shadows 56 The box shadows 57 The border radius 58 JavaScript 59 Query selectors 60 API usage 60 Web forms 60 New input types 60 Form validation 75 Used in the game 77 Data attributes 78 www.it-ebooks.info Table of Contents [ iii ] Used in the game 80 Query selectors 82 Used in the game 85 Web fonts 85 Transitions 86 Animations 89 The text shadow 91 The box shadow 92 The border radius 93 The code 94 The HTML structure 94 JavaScript and logic 95 Summary 100 Chapter 3: Understanding the Gravity of HTML5 101 Browser compatibility 101 Supporting different browsers 102 HTML5 libraries and frameworks 103 jQuery 103 Google Web Toolkit 105 Supporting browsers with limited HTML5 features 106 Gracefully degrade 106 Polylls 109 Modernizr 109 The game 110 Code structure 111 API usage 113 Web audio 113 Scalable Vector Graphics (SVG) 115 Drag-and-drop 117 Web audio 119 How to use it 120 SVG 122 How to use it 126 Drag-and-drop 136 How to use it 137 Summary 139 Chapter 4: Using HTML5 to Catch a Snake 141 The game 142 API usage 143 How to use it 143 Typed arrays 147 How to use it 149 www.it-ebooks.info [...]... running HTML5 code What's more, as modern web browsers continue to get more and more powerful, your HTML5- based games and applications can run at or very near native application performance levels This book will help you learn all about HTML5, including the semantic markup elements, CSS3 styling, and the latest supporting JavaScript APIs With this knowledge and skill, we'll be able to create fun games. .. we'll be able to create fun games that can be played by anyone using a device connected to the Internet What this book covers Chapter 1, An Overview of HTML5, explains what HTML5 is, and how it fits into the Open Web platform paradigm It also introduces the three pillars of HTML5, namely the new HTML elements, CSS3, and new JavaScript APIs Chapter 2, HTML5 Typography, introduces the first game in the... www.it-ebooks.info An Overview of HTML5 Native features of the browser As stated earlier, one of the strengths of HTML5 is the way it reflects real-world needs, and brings elegant solutions to such needs Features that don't get used a whole lot by developers (or that don't get wide adoption by browser makers) eventually find their way out of the spec Likewise, repeated efforts by developers to solve recurring... of this book, however, not all features listed on the CSS3 specification are fully implemented by all browsers The way you can tell if a feature is not yet fully supported by the browser (or that a feature may stop being supported by a particular browser) is that the CSS rule is prefixed by a dash, followed by the code name for the browser For example, -webkit-(rule name) [ 23 ] www.it-ebooks.info ... One of the goals of HTML5 is to accomplish exactly that—to enable developers to create powerful, non-trivial applications that run completely over the Internet Another major goal of HTML5 is to be completely backwards compatible, so that web pages used for other purposes (namely the hyperlinking of research documents) can still function the same [9] www.it-ebooks.info An Overview of HTML5 Just as Tim... Just as Tim Berners-Lee added the hyperlink tag to SGML (among other tags), HTML5 is basically just that—more tags (or more functionality) to the previous version of the language While that is a good, general overview of what HTML5 is, there is a bit more to the story Beyond the new tags added to the HTML specification, the term HTML5 also refers to this next step in the evolution of the Web Some people... done within a known range, such as the number of steps completed in a registration process This tag represents the text component of a ruby annotation This tag represents the text component of a ruby annotation that is displayed by the browser when ruby annotations are not supported This tag represents a general-purpose section within the document, such as a slide, or the area of... different API implementations among different browsers The main HTML5 features described in the chapter include web audio, SVG graphics, and drag-and-drop www.it-ebooks.info Preface Chapter 4, Using HTML5 to Catch a Snake, creates a traditional snake game using the new HTML5 canvas element, with its accompanying 2D rendering context Other HTML5 features described in the chapter include web workers, offline... invest the majority of your time building unique applications, since the repetitive code is abstracted away by the browser One last exciting point about this positive cycle of HTML5 that I'd like to point out is, how, since HTML5 is responsive to common use cases and real world needs, as time goes by we can only expect more and more really neat and useful features being added to the browser natively Who... that jQuery has become so popular, and has gained such wide acceptance by web developers, is the revolutionary way in which it allows you to access DOM elements Before jQuery, the three most common ways of accessing DOM elements were as follows: • document.getElementsByTagName() • document.getElementsByClassName() • document.getElementById() Based on jQuery's solution to this limited way of accessing document . www.it-ebooks.info Learn HTML5 by Creating Fun Games Learn one of the most popular markup languages by creating simple yet fun games Rodrigo Silveira BIRMINGHAM - MUMBAI www.it-ebooks.info Learn HTML5 by Creating. interaction games and iOS applications. He is currently a founder of game development learning company, 4 2games ( http://4 2games. net), where he makes game development tutorials and online learning. 1 Chapter 1: An Overview of HTML5 7 What is HTML? 7 A brief history of HTML 8 The evolution of the World Wide Web 8 What is HTML5? 9 HTML5 – the next step in the evolution 9 HTML5 is not a single feature