HTML5 Using Games to Learn HTML5 and JavaScript CONTENTS i The Essential Guide to HTML5 Using Games to Learn HTML5 and JavaScript Jeanine Meyer 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 orders-ny@springer-sbm.com, or visit www.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 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: Paul Manning Lead Editor: Ben Renow-Clarke Technical Reviewer: Cheridan Kerr Editorial 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 Welsh Coordinating Editor: Debra Kelly Copy Editor: Sharon Terdeman Compositor: Bronkella Publishing Indexer: Brenda Miller Artist: April Milne Cover Artist; Corné van Dooren Cover Designer: Anna Ishchenko CONTENTS iii 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. CONTENTS iv 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 CONTENTS v 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 CONTENTS vi 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 CONTENTS vii 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 CONTENTS viii 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 [...]... support some of the HTML5 features I ll be using in other tutorials, though support is coming in IE9) In Firefox, click on File and then Open file and browse to your HTML file In Chrome, press Ctrl on the PC (CMD on the MAC) and o and then browse to the file and click OK to open it You should see something like my examples Click on the hyperlinks to get to the other sites Reload the page using the reload... singleton tag Its element type is img (not image) and you put all the information with the tag itself using what are termed attributes What information? The most important item is the name of the file that holds the image The tag tells the browser to look for a file with the name frog and the file type jpg In this case, the browser looks in the same directory or folder as the HTML... that the write to be invoked is a method associated with the document produced by the HTML file So, something is written out as part of the HTML document What is written out? Whatever is between the opening parenthesis and the closing parenthesis And what is that? It is the result of the call to the built-in function Date The Date function gets information maintained by the local computer and hands... ways JavaScript is a programming language that s used to make the web site dynamic and interactive In all but the smallest working groups, different people may be responsible for the HTML, CSS, and JavaScript, but it s always a good idea to have a basic understanding of how these different tools work together If you are already familiar with the basics of HTML and how CSS and JavaScript can be added together,... images and a way to obtain the current day, date, and time Later applications will require more discussion, but for this one we ll go straight to how to implement it using HTML, CSS, and JavaScript 3 CHAPTER 1 HTML5, CSS, and JavaScript features As I noted, HTML documents are text, so how do we specify links, pictures, formatting, and coding? The answer is in the markup, that is, the tags Along with the. .. to put the guessed boxes together The program displays whether or not the player is correct See previous This paragraph contains the hyperlink to quiz1.html Closing p tag Opening p tag 15 CHAPTER 1 Code Explanation The Maze program is a multi-stage game The player builds a maze by using the mouse to build walls The player then can move a token through the maze The player... comments and including images such as logos is within the practice called “fair use,” but I am not a lawyer For the most part, people like links to their sites It doesn t affect the legal question, but you can also choose to set the src in the img tag to the Web address of the site where the image lives if you d rather not download a particular image file to your computer and then upload it to your... and size This lets you pick a favorite font, and also specify 18 THE BASICS what font to use if the preferred font is not available on the user's computer You can specify the margin and padding or vary independently the margin-top, margin-left, padding-top, and so forth Testing and uploading the application You need to have all the files, in this case the single HTML file plus all image files, in the. .. overstating things, but it is true the new features are exciting It now is possible, using just 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... appreciate how to do it You will know where we are headed as I explain the concepts and details The task for this chapter is to build a web page of links to other web sites In this way, you ll get a basic understanding of the structure of an HTML document, with a small amount of CSS code and JavaScript code For this and other examples, please think of how to make the project meaningful to you The page could . HTML5 Using Games to Learn HTML5 and JavaScript CONTENTS i The Essential Guide to HTML5 Using Games to Learn HTML5 and JavaScript. CONTENTS The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript Copyright © 2010 by Jeanine Meyer