HTML5 Using Games to Learn HTML5 and JavaScript CONTENTS The Essential Guide to HTML5 Using Games to Learn HTML5 and JavaScript Jeanine Meyer i CONTENTS The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript Copyright © 2010 by Jeanine Meyer All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-3383-1 ISBN-13 (electronic): 978-1-4302-3384-8 Printed and bound in the United States of America (POD) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. Distributed to the book trade worldwide by Springer Science+Business Media LLC., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please e-mail [email protected] or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section. Credits President and Publisher: Coordinating Editor: Paul Manning Debra Kelly Lead Editor: Copy Editor: Ben Renow-Clarke Sharon Terdeman Technical Reviewer: Compositor: Cheridan Kerr Bronkella Publishing Editorial Board: Indexer: Clay Andres, Steve Anglin, Mark Beckner, Brenda Miller Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Artist: Michelle Lowman, Matthew Moodie, April Milne Duncan Parkes, Jeffrey Pepper, Cover Artist; Frank Pohlmann, Douglas Pundick, Corné van Dooren Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Cover Designer: Anna Ishchenko CONTENTS To Daniel, Aviva, Anne, Esther, and Joseph, who is still in our lives, and for the newest members of the family: Allison, Liam, and Grant. iii CONTENTS Contents at a Glance Contents at a Glance................................................................................................iv Contents.....................................................................................................................v About the Author......................................................................................................x About the Technical Reviewer...............................................................................xi Acknowledgments...................................................................................................xii Introduction............................................................................................................xiii Chapter 1: The Basics...............................................................................................1 Chapter 2: Dice Game.............................................................................................21 Chapter 3: Bouncing Ball........................................................................................67 Chapter 4: Cannonball and Slingshot.....................................................................97 Chapter 5: The Memory (aka Concentration) Game............................................141 Chapter 6: Quiz......................................................................................................179 Chapter 7: Mazes...................................................................................................213 Chapter 8: Rock, Paper, Scissors........................................................................259 Chapter 9: Hangman..............................................................................................287 Chapter 10: Blackjack............................................................................................317 Index.......................................................................................................................347 iv CONTENTS Contents Contents at a Glance................................................................................................iv Contents.....................................................................................................................v About the Author......................................................................................................x About the Technical Reviewer...............................................................................xi Acknowledgments...................................................................................................xii Introduction............................................................................................................xiii Chapter 1: The Basics...............................................................................................1 Introduction.....................................................................................................................................................1 Critical requirements.......................................................................................................................................3 HTML5, CSS, and JavaScript features..........................................................................................................4 Basic HTML structure and tags..................................................................................................................4 JavaScript programming...........................................................................................................................10 Building the application and making it your own..........................................................................................11 Testing and uploading the application..........................................................................................................19 Summary........................................................................................................................................................19 Chapter 2: Dice Game.............................................................................................21 Introduction...................................................................................................................................................21 Critical requirements.....................................................................................................................................24 HTML5, CSS, and JavaScript features........................................................................................................24 Pseudo-random processing and mathematical expressions..................................................................24 Variables and assignment statements.....................................................................................................25 Programmer-defined functions.................................................................................................................26 Conditional statements: if and switch......................................................................................................27 Drawing on the canvas..............................................................................................................................29 Building the application and making it your own..........................................................................................38 Throwing a single die.................................................................................................................................40 Throwing two dice......................................................................................................................................47 The complete game of craps.....................................................................................................................55 v CONTENTS Testing and uploading the application..........................................................................................................65 Summary........................................................................................................................................................65 Chapter 3: Bouncing Ball........................................................................................67 Introduction...................................................................................................................................................67 Critical requirements.....................................................................................................................................70 HTML5, CSS, JavaScript features...............................................................................................................70 Drawing a ball, image, and gradient..........................................................................................................70 Building the application and making it your own..........................................................................................80 Testing and uploading the application..........................................................................................................96 Summary........................................................................................................................................................96 Chapter 4: Cannonball and Slingshot.....................................................................97 Introduction...................................................................................................................................................97 Critical requirements...................................................................................................................................100 HTML5, CSS, and JavaScript features......................................................................................................101 Arrays and programmer-defined objects................................................................................................101 Rotations and translations for drawing...................................................................................................103 Drawing line segments.............................................................................................................................107 Mouse events for pulling on the slingshot..............................................................................................108 Changing the list of items displayed using array splice........................................................................110 Distance between points.........................................................................................................................110 Building the application and making it your own........................................................................................111 Cannonball: with cannon, angle, and speed..........................................................................................118 Slingshot: using a mouse to set parameters of flight............................................................................128 Testing and uploading the application........................................................................................................140 Summary......................................................................................................................................................140 Chapter 5: The Memory (aka Concentration) Game............................................141 Introduction.................................................................................................................................................141 Critical requirements...................................................................................................................................146 HTML5, CSS, JavaScript features.............................................................................................................146 Representing cards.................................................................................................................................146 Using Date for timing...............................................................................................................................147 Providing a pause....................................................................................................................................148 vi CONTENTS Drawing text.............................................................................................................................................149 Drawing polygons....................................................................................................................................151 Shuffling cards.........................................................................................................................................152 Implementing clicking on a card..............................................................................................................152 Preventing certain types of cheating.....................................................................................................153 Building the application and making it your own........................................................................................154 Testing and uploading the application........................................................................................................177 Summary......................................................................................................................................................177 Chapter 6: Quiz......................................................................................................179 Introduction.................................................................................................................................................179 Critical requirements...................................................................................................................................183 HTML5, CSS, and JavaScript features......................................................................................................184 Storing and retrieving information in arrays...........................................................................................184 Creating HTML during program execution..............................................................................................186 Changing elements by modifying CSS using JavaScript code.............................................................189 Text feedback using form and input elements.......................................................................................190 Presenting video......................................................................................................................................191 Building the application and making it your own........................................................................................193 Testing and uploading the application........................................................................................................210 Summary......................................................................................................................................................210 Chapter 7: Mazes...................................................................................................213 Introduction.................................................................................................................................................213 Critical requirements...................................................................................................................................218 HTML5, CSS, and JavaScript features......................................................................................................219 Representation of walls and the token...................................................................................................219 Mouse events to build and position a wall..............................................................................................219 Detecting the arrow keys........................................................................................................................220 Collision detection: token and any wall..................................................................................................222 Using local storage..................................................................................................................................224 Encoding data for local storage..............................................................................................................230 Radio buttons...........................................................................................................................................231 vii CONTENTS Building the application and making it your own........................................................................................232 Creating the second maze application...................................................................................................246 Testing and uploading application..............................................................................................................257 Summary......................................................................................................................................................257 Chapter 8: Rock, Paper, Scissors........................................................................259 Introduction.................................................................................................................................................259 Critical requirements...................................................................................................................................262 HTML5, CSS, and JavaScript features......................................................................................................263 Providing graphical buttons for the player.............................................................................................263 Generating the computer move..............................................................................................................267 Starting off...............................................................................................................................................274 Building the application and making it your own........................................................................................275 Testing and uploading the application........................................................................................................284 Summary......................................................................................................................................................285 Chapter 9: Hangman..............................................................................................287 Introduction.................................................................................................................................................287 Critical requirements...................................................................................................................................295 HTML5, CSS, JavaScript features.............................................................................................................295 Storing a word list as an array defined in an external script file............................................................295 Generating and positioning HTML markup, then making the markup be buttons, and then disabling the buttons.....................................................................................................................................................296 Creating progressive drawings on a canvas..........................................................................................298 Maintaining the game state and determining a win or loss....................................................................300 Checking a guess and revealing letters in the secret word by setting textContent............................301 Building the application and making it your own........................................................................................302 Testing and uploading the application........................................................................................................315 Summary......................................................................................................................................................315 Chapter 10: Blackjack............................................................................................317 Introduction.................................................................................................................................................317 Critical requirements...................................................................................................................................322 HTML5, CSS, and JavaScript features......................................................................................................323 Building the application and making it your own........................................................................................330 viii