TEAMFLY Team-Fly ® JavaScript Programming ANDY HARRIS © 2001 by Prima Publishing. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, re- cording, or by any information storage or retrieval system with- out written permission from Prima Publishing, except for the inclusion of brief quotations in a review. A Division of Prima Publishing Prima Publishing and colophon are registered trade- marks of Prima Communications, Inc. PRIMA TECH is a trademark of Prima Communications, Inc., Roseville, California 95661. Microsoft, Windows, Windows NT, and Internet Explorer are trademarks or registered trademarks of Microsoft Corporation in the U.S. and other countries. Netscape, Netscape Navigator, and JavaScript are trademarks or registered trademarks of Netscape Communications Corpora- tion in the U.S. and other countries. All other trademarks are the property of their respective owners. Important: Prima Publishing cannot provide software support. Please contact the appropriate software manufacturer’s techni- cal support line or Web site for assistance. Prima Publishing and the author have attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. Information contained in this book has been obtained by Prima Publishing from sources believed to be reliable. However, because of the possibility of human or mechanical error by our sources, Prima Publishing, or others, the Publisher does not guarantee the accuracy, adequacy, or completeness of any information and is not responsible for any errors or omissions or the results ob- tained from use of such information. Readers should be particu- larly aware of the fact that the Internet is an ever-changing en- tity. Some facts might have changed since this book went to press. ISBN: 0-7615-3410-5 Library of Congress Catalog Card Number: 2001086 Printed in the United States of America 01 02 03 04 05 BB 10 9 8 7 6 5 4 3 2 1 Publisher: Stacy L. Hiquet Associate Marketing Manager: Heather Buzzingham Managing Editor: Sandy Doell Series Editor: Andy Harris Acquisitions Editor: Melody Layne Project Editors: Melody Layne and Kim Spilker Technical Reviewer: Michael Vine Copy Editor: Andrew Saff Proofreader: Lorraine Gunter Interior Layout: Danielle Foster Cover Design: Prima Design Team Indexer: Sharon Hilgenberg Send Us Your Comments: To comment on this book or any other PRIMA TECH title, visit our reader response page on the Web at http://www.prima-tech.com/comments. How to Order: For information on quantity discounts, contact the publisher: Prima Publishing, P.O. Box 1260BK, Rocklin, CA 95677-1260; (916) 787-7000. On your letterhead, in- clude information concerning the intended use of the books and the number of books you want to purchase. Untitled-7 4/2/03, 4:28 PM2 To Heather, Elizabeth, and Matthew Untitled-7 4/2/03, 4:28 PM3 A c k n o wl e d g m e nt s I first acknowledge Him from whom all flows. Thank you again, Heather, for listening to the keyboard clicking all those late nights. You are the sun and the stars to me. Thanks to Melody Layne for being a good friend and a good editor (at the same time, even!). Thank you to Kim Spilker for your encouragement on this project, and to all the folks at Prima for being nice people to work with. A special thank you to Andy Saff for copyediting. If this book makes any sense at all, it’s because of you. Thank you also to Michael Vine for technical editing. I appreciate your efforts very much. A very special thank you goes to Scott Porter for his excellent game development library. His clever programming and selfless generosity make JavaScript game programming much more accessible than it has ever been before. I especially want to thank all my students, present and past. You have taught me so much more than I was ever able to teach you. Untitled-7 4/2/03, 4:28 PM4 A b o u t t he A u t h o r A ndy Harris began his teaching career as a high school special education teacher. During that time, he taught himself enough computing to do part-time computer consulting and database work. He began teaching computing at the university level in the late 1980s as a part-time job. Since 1995, he has been a full-time lecturer in the Computer Science Department of Indiana University/ Purdue University—Indianapolis. He manages the IUPUI Streaming Media Lab for the department and teaches classes in several programming languages. His main interests are Java, Visual Basic, Perl, JavaScript/dynamic HTML, virtual reality, programming on portable devices, and streaming media. Untitled-7 4/2/03, 4:28 PM5 C on t e n t s a t a G la n c e CHAPTER 1Variables, Input, and Output 1 CHAPTER 2 The Fortune Teller: Random Numbers and the if Statement 21 CHAPTER 3 The Number Guesser: for and while Loops 45 CHAPTER 4 The Basic Mad Lib Program and Object-Based Programming 63 CHAPTER 5 Advanced Mad Lib: Using the Other Form Elements 89 CHAPTER 6 Petals around the Rose: Dynamic Output 115 CHAPTER 7Image Swapping and Lookup Tables: The Basketball Game 139 CHAPTER 8 Dynamic HTML: The Stealth Submarine 171 CHAPTER 9 Sprite Animation: The Racer 203 CHAPTER 10 Using Other gameLib Features: The Dogfight Game 235 CHAPTER 11 Cookies and the Mouse: The Jigsaw Puzzle 261 CHAPTER 12 The Game Creation Process: The Brick Game 289 A PPENDIX A Syntax Reference 321 Index 335 Untitled-7 4/2/03, 4:28 PM6 C on t e n t s Introduction xiii Variables, Input, and Output 1 The Project: Name Game 2 Adding Code to HTML 3 Using Variables 5 Getting Input from the User 8 Building More Complicated Text 10 Working with Numbers 11 Using String Methods 16 Summary 19 The Fortune Teller: Random Numbers and the if Statement 21 The Project: The Fortune Teller 22 Getting Random Numbers 22 Making Specialized Random Numbers 24 Making Decisions with the if Statement 28 Using the else Structure 32 Using Nested if Structures 34 Using the switch Structure 38 Returning to the Fortune Program 42 Summary 44 The Number Guesser: for and while Loops 45 The Project: The Number Guesser 46 Counting Forward 46 1 CHAPTER 2 CHAPTER 3 CHAPTER Untitled-7 4/2/03, 4:28 PM7 viii C on t e n t s Skipping Values 50 Counting Backward 52 Using the while Loop 53 Returning to the Number Guesser 57 Summary 62 The Basic Mad Lib Program and Object-Based Programming 63 The Project: Mad Lib 64 Objects and HTML 65 Reading the Properties of an Object 68 Methods 71 Events 74 The Purpose of Functions 78 Event-Driven Input and Output 79 Back to the Mad Lib Program 84 Summary 88 Advanced Mad Lib: Using the Other Form Elements 89 The Project: the Advanced Mad Lib 90 Working with Textlike Objects 90 Using Check Boxes 93 Using Radio Buttons 97 Using the select Object 102 Using Multiline Select Boxes 105 Returning to the Advanced Mad Lib Program 107 Summary 114 Petals around the Rose: Dynamic Output 115 The Project: Petals around the Rose 116 Generating Output in Frames 118 Displaying Output in Separate Windows 122 Designing the Petals around the Rose Game 127 4 CHAPTER 5 CHAPTER 6 CHAPTER Untitled-7 4/2/03, 4:28 PM8 C on t e n t s ix Creating Graphics for JavaScript Games 129 Generating the Dice-Rolling Routine 133 Summary 137 Image Swapping and Lookup Tables: The Basketball Game 139 The Project: The Basketball Game 140 Swapping Images 141 Using the MouseOver Events 145 Creating Simple Arrays 149 Creating Arrays with Images 152 Using Lookup Tables 155 Putting Together the Basketball Game 160 Summary 168 Dynamic HTML: The Stealth Submarine 171 The Project: The Stealth Submarine Program 172 Dealing with Browser Dependency 173 Using Cascading Style Sheets 176 Working with Positionable CSS Elements 179 Changing the Text in a Positionable Element 185 Adding Cross-Platform Sound 189 Putting It Together in the Stealth Sub Game 192 Summary 200 Sprite Animation: The Racer 203 The Project: The Racer Program 204 Introducing the Sprite 206 Moving Sprites Around 211 Using Frame Animation in Sprites 214 Detecting Collision 218 Creating a Race Timer 221 Returning to the Racer Program 224 Summary 233 7 CHAPTER 8 CHAPTER 9 CHAPTER Untitled-7 4/2/03, 4:28 PM9 [...]... converts the string meal to a number, and the multiplication works The next line is where the problems begin: JavaScript Programming for the Absolute Beginner 16 FIGURE 1.8 The user enters the cost of the meal, and the program calculates everything correctly There’s only one new thing in the code That is this line: meal = eval(meal); This statement simply evaluates the string value that the user entered The. .. variables • Learn how to get data from the user • Perform basic operations on data JavaScript Programming for the Absolute Beginner 2 The Project: Name Game In Figure 1.1, a special box pops up in a normal Web page that asks the user for his or her name Then, a series of other boxes pop up, asking for a last name and then finding other ways to manipulate the name FIGURE 1.1 By the end of this chapter, you will... until you try to do math on it In the following line, meal gets a string value, because that’s what the prompt statement returns: meal = prompt("How much was the meal?"); TE JavaScript Programming for the Absolute Beginner 14 The following line multiplies the value of meal by 15: var tip = meal * 15; FIGURE 1.7 This time the user gets to enter the cost of the meal, but the program’s calculations are incorrect... follow JavaScript Programming for the Absolute Beginner 8 Getting Input from the User In addition to sending information to the user, computers can also retrieve information from the user This kind of exchange is called input HINT Sometimes people get confused about whether something is input or output For example, suppose that you are reading a text message on a computer screen As you read the message,... to other things in the browser You might have noticed the semicolon character (;) at the end of the alert line This character indicates the end of the alert statement Most lines of JavaScript code end with the semicolon The comments did not need a semicolon, because the compiler ignores them You’ll see some other places later where a semicolon is not needed at the end of a line, but for now it’s fine... to work with the container than the actual food (that is, you would rather carry the sack containing the food than carry the various items of your lunch individually) Variables fulfill a similar function for the computer They hold information until the computer needs to work with it Chapter 1 Variables, Input, and Output One of the most important aspects of programming to learn is how the computer... variable ready in which to store the answer Chapter 1 Variables, Input, and Output FIGURE 1.4 JavaScript Programming for the Absolute Beginner 10 Saying Hi to the User Now that you have a variable that contains the user’s name, it is a reasonably simple task to return that value to the user The following line does the trick: alert(userName); Because userName is not in quotes, the computer interprets it as... ideas for the chapter Then, you’ll look at a series of smaller programs that illustrate each of the major points of the chapter Finally, you’ll put these concepts together to build the larger program that you saw at the opening of the chapter You’ll be able to see important ideas in simple, straightforward code, and you’ll also see more involved programs that put multiple ideas together All the programs... greeting = "Hi there, Joe"; alert(greeting); Essentially, this program stores the text “Hi there, Joe,” then displays the message to the user as soon as the Web page is loaded into the browser This program illustrates how the computer can store information for later retrieval A special kind of element called a variable is the secret Computers essentially work with information It’s... Input, and Output 11 JavaScript Programming for the Absolute Beginner 12 whether you are talking about numbers or text Still, sometimes you’ll need to do some special tricks to help JavaScript guess correctly Creating the Adder Application The program shown in Figure 1.6 provides a handy service It looks at the cost of a meal, adds a 15 percent tip, and calculates the total bill This program . apply them specifically in JavaScript. I will use the context of game programming to teach the concepts, but you will find that you can use the techniques for. each of the major points of the chapter. Finally, you’ll put these concepts together to build the larger program that you saw at the opening of the chapter.