Using Games to Learn HTML5 and JavaScript

375 Pages·2010·9.87 MB·English

by  Jeanine Meyer

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 [phone], 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