Đang tải... (xem toàn văn)
FriendsofED the essential guide to HTML5 oct 2010
HTML5 Using Games to Learn HTML5 and JavaScript Download from Wow! eBook <www.wowebook.com> 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 [...]... clicked, and underlined Closing p tag Opening p tag The Cannonball is See the previous case The a element here a ballistics simulation A ball appears to move refers to the cannonball .html file and the on the screen in an arc The program determines displayed text is Cannonball when the ball hits the ground or the target The player can adjust the speed and the angle... 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... think of as the backs of cards The player clicks on first one and then another and pictures are revealed If the two pictures represent a match, the two cards are removed Otherwise, the backs are displayed The game continues until all matches are made The time elapsed is calculated and displayed See previous This paragraph contains the hyperlink to memory .html Closing p tag Opening p tag The indicates that this is a singleton tag There... 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 it off to the write method Date also requires the use of parentheses, which is why you see so many The write method displays the date and time information as part of the HTML document, as shown in Figure 1-2 The. .. href="quiz1 .html" >Quiz game presents the player with 4 boxes holding names of countries and 4 boxes holding names of capital cities These are selected randomly from a larger list The player clicks to indicate matches and the boxes are moved 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 ... After saving the file as HTML and invoking word wrap The color coding, which you ll see only after the file is saved as HTML, indicates tags and quoted strings This can be valuable for catching many errors Now let s delve into the HTML coding, first for the list of annotated links and then for the favorite sites The code uses the features described in the previous section Table 1-1 shows the complete... within the parentheses Since I wanted the information written out to change as the date and time change, I needed a way to access the current date and time, so I used the built-in JavaScript Date function This function produces an object with the date and time Later, you ll see how to use Date objects to compute how long it takes for a player to complete a game For now, all I want to do is display the. .. font will be the default Opening p for paragraph tag The Dice game presents the game called craps Text with an a element The opening a tag has the attribute href set to the value craps .html Presumably this is a file in the same folder as this HTML file The contents of the a element—whatever is between the and the —will be displayed, first in blue and then in mauve... Firefox Figure 1-3 The HTML title in two places in Firefox 4 THE BASICS In most cases, you will create something within the body of the web page that you ll think of as a title, but it won t be the HTML title! Figure 1-3 also shows the body of the web page: the short piece of text Notice that the words html, head, title and body do not appear The tags “told” the browser how to display the HTML document . HTML5 Using Games to Learn HTML5 and JavaScript Download from Wow! eBook <www.wowebook.com> CONTENTS i The Essential Guide to HTML5 Using Games to Learn HTML5 and JavaScript. 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, you may want to skip ahead to the next chapter 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