Transcription
HTML5Using Games to Learn HTML5 and JavaScript
CONTENTSThe Essential Guide toHTML5Using Games to Learn HTML5 and JavaScriptJeanine Meyeri
CONTENTSThe Essential Guide to HTML5: UsingGames to Learn HTML5 and JavaScriptCopyright 2010 by Jeanine MeyerAll rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic ormechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior writtenpermission of the copyright owner and the publisher.ISBN-13 (pbk): 978-1-4302-3383-1ISBN-13 (electronic): 978-1-4302-3384-8Printed 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 occurrenceof a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to the benefit ofthe 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 betaken 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 orders-ny@springer-sbm.com, or visitwww.springeronline.com.For information on translations, please e-mail rights@apress.com or visit www.apress.com.Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions andlicenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web pageat 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 inthe preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to anyloss 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.CreditsPresident and Publisher:Paul ManningLead Editor:Ben Renow-ClarkeTechnical Reviewer:Cheridan KerrEditorial Board:Clay Andres, Steve Anglin, Mark Beckner,Ewan Buckingham, Gary Cornell,Jonathan Gennick, Jonathan Hassell,Michelle Lowman, Matthew Moodie,Duncan Parkes, Jeffrey Pepper,Frank Pohlmann, Douglas Pundick,Ben Renow-Clarke, Dominic Shakeshaft,Matt Wade, Tom WelshCoordinating Editor:Debra KellyCopy Editor:Sharon TerdemanCompositor:Bronkella PublishingIndexer:Brenda MillerArtist:April MilneCover Artist;Corné van DoorenCover Designer:Anna Ishchenko
CONTENTSTo Daniel, Aviva, Anne, Esther, and Joseph, who is still in our lives, and for the newest members ofthe family: Allison, Liam, and Grant.iii
CONTENTSContents at a GlanceContents at a Glance. ivContents. vAbout the Author . xAbout the Technical Reviewer . xiAcknowledgments . xiiIntroduction . xiiiChapter 1: The Basics . 1Chapter 2: Dice Game . 21Chapter 3: Bouncing Ball . 67Chapter 4: Cannonball and Slingshot . 97Chapter 5: The Memory (aka Concentration) Game . 141Chapter 6: Quiz. 179Chapter 7: Mazes . 213Chapter 8: Rock, Paper, Scissors . 259Chapter 9: Hangman . 287Chapter 10: Blackjack. 317Index . 347iv
CONTENTSContentsContents at a Glance. ivContents. vAbout the Author . xAbout the Technical Reviewer . xiAcknowledgments . xiiIntroduction . xiiiChapter 1: The Basics . 1Introduction .1Critical requirements .3HTML5, CSS, and JavaScript features .4Basic HTML structure and tags .4JavaScript programming .10Building the application and making it your own .11Testing and uploading the application.19Summary .19Chapter 2: Dice Game . 21Introduction .21Critical requirements .24HTML5, CSS, and JavaScript features .24Pseudo-random processing and mathematical expressions.24Variables and assignment statements .25Programmer-defined functions .26Conditional statements: if and switch .27Drawing on the canvas .29Building the application and making it your own .38Throwing a single die .40Throwing two dice .47The complete game of craps .55v
CONTENTSTesting and uploading the application.65Summary .65Chapter 3: Bouncing Ball . 67Introduction .67Critical requirements .70HTML5, CSS, JavaScript features .70Drawing a ball, image, and gradient .70Building the application and making it your own .80Testing and uploading the application.96Summary .96Chapter 4: Cannonball and Slingshot . 97Introduction .97Critical requirements .100HTML5, CSS, and JavaScript features .101Arrays and programmer-defined objects .101Rotations and translations for drawing.103Drawing line segments.107Mouse events for pulling on the slingshot.108Changing the list of items displayed using array splice .110Distance between points .110Building the application and making it your own .111Cannonball: with cannon, angle, and speed .118Slingshot: using a mouse to set parameters of flight .128Testing and uploading the application.140Summary .140Chapter 5: The Memory (aka Concentration) Game . 141Introduction .141Critical requirements .146HTML5, CSS, JavaScript features .146Representing cards .146Using Date for timing .147Providing a pause .148vi
CONTENTSDrawing text .149Drawing polygons .151Shuffling cards.
HTML5, Cascading Style Sheets, and JavaScript, to draw lines, arcs, circles and ovals on the screen and specify events and event handling to produce animation and respond to user actions. You can include video and audio on your web site with standard controls, or place the video or audio in your application exactly when needed. You can create .
