Fjas;Dlkfjas;Dlfjas

Production: Set underlined text in a monospace (computer) font Please replace the following code: [md] = em dash [nd] = en dash [ts] = times (multiplication) symbol ??Andy: Just as a reminder for the CD, all associated html files for this chapter include absolute paths. MichaelMelody/Author: I’d like to rescind one of my editing decisions in Chapter 9. In that chapter, I decided to set references to the layer object in monospace as a keyword (i.e., “the layer object”). Basically, I assumed that creating a layer object required a layer keyword (just as creating a document object requires use of a document keyword). After reading this chapter, however, I’ve seen the light. It doesn’t appear that a layer keyword is necessary to create a layer in the code, must like creating a sprite object apparently doesn’t require the use of a sprite keyword. So if you could simply remove the underlining for “layer” that I used in Chapter 9 (and also make sure that the term is capitalized in any headings), that chapter will be consistent with this one and the next two. Sorry for the inconvenience and the boneheaded editorial judgment. – andy the copyeditorIt's a little crazier than that. In chapter eight, there actually was a layer keyword. It is an HTML tag used only in Netscape. Gamelib also has a layer object, but you do not need to use the term "layer" to invoke it. -Andy H. Chapter 10 Using Other GgamelLib Features: The Dogfight Game[H1]IntroductionSprite graphics are a very powerful tool. With a few more enhancements, you are well on your way to building sophisticated 2D games. In this chapter, you will learn about some of the other great tools that gameLlib gives you for building better games. In particular, you will learn how to do the following:***PD: begin unnumberbulleted list*How to Build multiplayer games*How to Trap keyboard events*How to Manage sound*How to Generate layers*How to Add missiles*How to Improve your animations***PD: end unnumberbulleted list[H1]The Dogfight GameTo demonstrate these features, you will build a simple two- player arcade game. The game is simple: Two players sit at the same keyboard and control little biplanes. The players try to blast each other out of the sky. Figures 10.1 and 10.2 show the game’s interface.***PD: Please insert Figure jg10Fig01.pcx dogfight main screen Figure 10.1 Two planes enjoying a blissful afternoon.***PD: Please insert Figure jg10Fig02.pcx dogfight shooting Figure 10.2 Take that, Red Baron!The players can shoot each other downThe game has a number of interesting features that might not all be apparent from the screen shots.First, this is a two-player game. Although While it might seem that writing a game for two players is would be more difficult than writing one for a single player, this is not always the case. The hardest part of "player vs.versus the computer" style games is developing the artificial intelligence for the computer player. With a two- player game, this is not a problem, as the computer does not need to store any strategies, but simply just respond to two sets of input.The game uses keyboard input. Both versions of the document object model provide techniques to read mouse and keyboard events, but these two models are (surprise) very different in the browser implementations. The gameLlib API provides a simpler multi-browser interface, which makes managing keystrokes reasonably straightforward. Keyboard input provides a much smoother type of input for many types of games than the techniques that you have used previously in the earlier parts of this book.***PD: begin notehintSinceBecause JavaScript is an Internet technology, you might be tempted to write a two- player game with the players on different computers. Sadly, JavaScript does not have the communication functions to enable you to accomplish do this. You would probably need a language like Java forto write multi-computer games.***PD: end hintnoteThe Dogfight game features sound effects when the players shoot at each other, and when they score hits. The gameLlib library encapsulates the techniques demonstrated in Chapter eight 8 for generating sound. You might recall from the chapter that generating sound can be generation was quite challenging in that chapter, but it is reasonably easy using gameLlib.To create the Dogfight game’s The documentation and scorekeeping parts of the game, I used were described using gameLlib layers. A layer is gameLlib's way of specifying an object likesuch as a Netscape layer or CSS element. In fact, you will see that with liberal use of layer and sprite objects, you can write the entire program was written as a series of gamelLib objects. The HTML in the program is almost nonexistent.You will notice some new animation techniques in the Dogfight game. The planes can shoot out bullets, and if you look very carefully, you will note that the propellers appear to spin. ???Andy: You mentioned another OOP technique above (encapsulation). Would this concept be a candidate for a “In the real world” segment or a sidebar? Michael [H1]Using Layers and the KeyboardTo Begin your tour of the new gamelLib features, start by looking at a program that demonstrates keyboard input and gamelLib layers. Figure 10.3 shows the program’s interface.***PD: Please insert Figure jg10Fig03.pcx LayerKey showing A Figure 10.3 When the user presses the A key, the letter "A" appears in a yellow box.[H2]Creating the Keyboard and LayerKey Demo ProgramAuthor: Can we delete this heading? The sections are so brief and intertwined, and the headings so similar, that presenting both headings seems unnecessary and odd. –andy the copyeditor***PD: Please insert Figure jg10Fig03.pcx LayerKey showing A Figure 03 When the user presses the A button, the letter "A" appears in a yellow box.The program traps for the "A", "B", and "C" keys. The yellow box is a layer. It's content can be changed dynamically, and it will appears to be part of the original page. [H2]Setting Up the PlaygroundProgram Author: I’m not sure what you mean by “playgound.” The program doesn’t seem to include a playground. Is this a term that your audience needs to be familiar with? If so, please define it. – andy the copyeditorAs usual, you will begin by importing gamelLib modules and setting up some variables:***PD: Begin Code<script language="Javascript" src="../gamelib196/gamelib/gamelib_core.js"></script><script language = "Javascript" src="../gamelib196/gamelib/gamelib_keyboard.js"></script><script> var display; var a; var b; var c;***PD: End CodeI first added the gamelib_core library, and also added the keyboard module. There is not a separate module for layers. Layer handling is done as a part of the core module.The four variables will all hold various components of the program. The display variable will contain a reference to the layer. The a, b, and c variables refer to each keystroke that I intend to trap for. (You’ll learn more about trapping keystrokes on that in a moment.)[H2]Creating a LayerA layer is an object in gameLlib, so it is set up like most other objects in JavaScript:***PD: Begin Code function init(){// Keyboard and Layer Demo// Andy Harris//set up display display = new Gl_layer(350, 200, 100, ""); display.setBgcolor("yellow"); display.show();***PD: End CodeThe new Gl_layer() command generates a new layer object. The first two parameters refer to the starting location of the layer. The next parameter (100) refers to the starting width of the layer. The starting height of the layer will be defined when something is added to the layer or when the layer is explicitly resized. The last parameter is the HTML text of the layer. This can be a variable containing an entire HTML page, or it can be actual HTML text, or you it can leave the variable be left blank and filled it in later.***PD: begin note Is itthis layer a Netscape layer, a gameLlib layer, or a CSSP element?The short answer is yes;, it's a combination of all these things. To simplify coding, Scott Porter (the author of gamelLib) defined a new object called a Gl_layer, which which encapsulates the best features of both the Netscape and IE approaches to positionable elements. It is convenient to call this new element a layer, but keep in mind that it is not exactly like the two types of layering objects defined in the browser Document Object Models. Fortunately, gamLib’s layer object it seems to be much better behaved than either of the other layer objects, especially when used across browser platforms.Author: Second-to-last sentence: What does the acronym DOM stand for? – andy the copyeditorAndy: I can’t remember if this has been defined before. If it has, please ignore. If not, we’ll add (Document Object Model) to the end of that sentence. Melody***PD: end noteThe gamlLib layer object is a very intriguing little monster. Table 10.1 Here is a lists of the most commonly used methods of the layer object:.***PD: begin table Table 10.1 Common Methods of the Layer Object Memberthod Description Example new Gl_layer( x , y , width , startingHTML ) Creates a new layer at ( x, y) that is width pixels wide, and contains the startingHTML as its body. var myLayer = new Gl_layer (0, 0, 100, "<H1>Hi there!</H1>"); .load ( filename , type ) Loads the specified file specified into the layer. If type is set to true, the file will be always be loaded from the server. myLayer.load("instructions.html", true); .moveTo( x , y) Moves the layer's top- left corner to the specified pixels. myLayer.moveTo(100, 200); .resizeTo( x , y) Resizes the layer to the specified size. myLayer.resizeTo(50, 50); .setXlimits( a , b ), setYlimits( a , b) Sets the boundaries for the layer. This method works as it does just like in the sprite library. myLayer.setXlimits(0, 500); myLayer.setYlimits(0, 300); .write( newHTML ) Replaces the content of the layer with newHTML. myLayer.write("<h3>Whoo Hoo!</h3>"); .setBgcolor( color ) Sets the layer's background to a specified color. myLayer.setBgcolor("red"); .show() Makes Shows the layer, making it visible. myLayer.show(); ***PD: end tableIn game development, layers are great for text that you want to place precisely on the screen. It is much easier to get a good screen layout with layers thant it is using plain HTML formatting. Also, the ability to access the write () method of a layers makes them great tools for communicating with the user. It's common to use layers for score-keeping, help screens, or any other place where you might want to place have dynamic text.In the Keyboard and LayerKey Demo program, I set up display was set up as a new layer at position (300, 200) with a starting width of 100 pixels and no beginning text. I then set the background color of the layer to yellow, and showed it. The layer object is not automatically shown until you invoke its show() method. Author: End of the last sentence: What is the significance of “showed it”? It seems to suggest that you are displaying an object that was previously not displayed, but that seems somewhat superfluous since you just created the object anyway. – andy the copyeditor***PD: begin In Real World In the Real WorldThe layer object is useful any time you want to have a dynamic part of the screen. I have used layers in a catalog program that displayed parts of a small database. You could use layers in a menu system for your Web page, or as an easy way to add dynamic content (likesuch as a message of the day).***PD: end In Real World [H2]Creating Keyboard Handler ObjectsThe gameLlib approach to keyboard handling simplifies the process of getting user input from the keyboard. The key (pun intended) is the trapkey () method. Look at the rest of the init() function to see how this approach works:***PD: Begin Code//set up keyboard traps a = Kb_trapkey("a"); b = Kb_trapkey("b"); c = Kb_trapkey("c");//start up program: Gl_hook("mainLoop()");Gl_start();} // end***PD: End CodeYou probably noticed that the init() function initializes the a, b, and c variables were all initialized by calling the Kb_trapkey() function. This function generates an instance of the key handler object. Table 10.2 lists the commands by which you Here's the main code that controls these objects:.***PD: begin table Table 10.2 Keyboard Handler Commands MemberCommand Description Example .pressed (read-only) Returns true if the user is currently pressing the key is currently being pressed. if (myKey.pressed){ alert("A"); } // end if Kb_trapkey( keyName ) Sets up a new key object that responds when the user presses keyName is pressd. myKey = Kb_trapKey("a"); Kb_lastkey Contains a reference to the last key pressed. if (Kb_lastkey == myKey){ alert("A"); } // end if ***PD: end tableGenerally, you will initialize keystrokes in some type of initialization function (as I have done herein this program) and check to see whether the user has pressed the key has been pressed in some type of main loop procedure.[H2]Responding to Keystrokes If the user presses the a, b, or c key is pressed, the program should display the appropriate value in the yellow layer. Here's the code for the main loop:***PD: Begin Code function mainLoop(){ var letter = ""; var message = ""; if(a.pressed){ letter = "A"; } // end if if(b.pressed){ letter = "B"; } // end if if(Kb_lastkey == c){ letter = "C"; } // end if message = " message += " size = 7>"; message += letter message += ""; display.write(message);} // end mainLoop***PD: End CodeThe function starts by setting up two utility variables. letter will contain one character denoting the value of a key press. The message variable will contain a simple HTML document that the program will be sendt to the display layer. The function looks at a and b using the .pressed method. (Remember that this function has been hooked to the timer loop, so it happensexecutes 20 times per second.) If the user is currently pressing the a or b keyis currently pressed, the value of letter is changesd. Just for demonstration purposes, I used the Kb_lastkey technique to determine ifwhether the user had pressed the c keyhad been pressed. ***PD: begin trapcautionThe underlying JavaScript routines can only trap only for normal keyboard characters. You cannot (yet) use this technique to trap for arrow keys, function keys, or other special keys on the keyboard. Also, this routine does not distinguish between upper- and lower case characters. For most game development purposes, this is finethe capabilities of the JavaScript routines are sufficient. ***PD: end trapcautionAfter a value has been assigned to the letter variable, the rest of the mainLoop () function involves building an HTML string, and writing it out to the display layer using the display.write() method.***PD: begin sidebar This Is a Unique Approach to Keyboard HandlingThe keyboard-handling technique used in gamelLib is terrific for game development. In this type of programming, developers usually use keystrokes are usually used to control a sprite or send other very quick signals from the user to the program. However, if you use other languages (including the JavaScript code on which the gameLib libraries were basedthe core JavaScript that gamelLib is built over), the algorithm used is a little bit different. Most languages have some sort of function or method that looks at the entire keyboard, and determines which key has been pressed, andthen returns back some type of integer code relating to the keypress. The programmer then analyzes this code to determine what has happened, and writes corresponding code.Author: Parenthetical remark in the third sentence: I don’t understand “the JavaScript that gameLib was built over.” Did you mean something like “the JavaScript code on which the gameLib libraries were based” or “the JavaScript code for which the gameLib libraries were designed”? – andy the copyeditor Andy: Can we make this sidebar part of the regular text? Melody***PD: end sidebar***PD: begin In Real World In the Real WorldDevelopers sometimes use keyboard handling is sometimes used as an error detection scheme. For example, you might want to ensure that a text box containsed no numeric characters. Also, you can use keyboard handling can be used as a control technique on certain kinds of applications. For example, I wrote a program that generates presentations with several slides on one long HTML page. I set up the 'n' key to move to the next slide, and 'p' to go to the previous slide.***PD: end In Real World[H1]Adding SoundYou might recall that sound can be challenging because of the completely different approaches that the major browsers take to embedding sound in Web pages. The gamelLib API provides a very easy interface to sound programming in JavaScript.[H2]Creating the Sound Demo Program Figure 10.4 shows Here is a simple program that demonstrates the basic sound features in gamelLib:. The program features two sound effects which are controlled by buttons on the web page. The user can start and stop a music file, or play a sound effect, by clicking on the appropriate buttons.Author: You should describe more specifically what the program does, using at least a couple of sentences. Don’t rely on the figure caption to tell the whole story, because it’s possible that the page layout will dictate that the figure be place on another page. – andy the copyeditor***PD: Please insert Figure jg10Fig04.pcx SoundDemo Figure 10.4 Thise Sound Demo program lets the user play a sound effect, as well as start and stop a music file.The process of using sounds follows a pattern that you've seen a few times now: You import a special module of the API, create variables that refer to sound objects, then and manipulate methods and properties of the sound objects.[H2]Creating a Sound Object[H2]The sound object is created through a function of the sound library. Here's the startup code for the Sound Demo program:***PD: Begin Code<script language="Javascript" src="../gamelib196/gamelib/gamelib_core.js"></script><script language="Javascript" src="../gamelib196/gamelib/gamelib_sound.js"> </script><script> var sndBang; var sndMusic; function init(){ sndBang = new Sd_add_sound("bang.wav"); sndMusic = new Sd_add_sound("canyon.mid");} // end init***PD: End CodeI created variables for two sounds, sndBang and sndMusic. Then I used the Sd_add_sound() method to generate sound objects to assign to the two variables. Table 10.4 lists Here are the key characteristics of the sound object:.***PD: begin table Table 10.4 Commonly Used Methods Characteristics of the Sound Object MemberMethod Description Example Sd_add_sound( fileName) Generates a new sound object based on fileName, which is a .wav or .midi file. var mySound = Sd_add_sound("bang.wav"); .play() Plays the sound. mySound.play(); .stop() Stops playing the sound. mySound.stop(); ***PD: end tableThe sound object can use either .wav files or .midi files. Generally, .wav files are used for sound effects, and .midi files are used for background music. You can find plenty of sounds on the Internet, although you should try to get permission of the file's owner before using itthe sound file in your game.[H2]Playing and Stopping SoundsOnce you have created a sound object, it is very simple to start and stop the sound effect. Here's the rest of the code for the Sound Demo program:***PD: Begin Code<body onload = "init()"><center><h1>Sound Demo<hr></h1><form><input type = button value = "bang" onclick = "sndBang.play()"><input type = button value = "start music" onClick = "sndMusic.play()"><input type = button value = "stop music" onClick = "sndMusic.stop()"></form></center><hr> </body>***PD: End CodeSince the code wais so basic, I integrated it directly into the HTML. Of course, you can also use the sound object's play () and stop () methods inside more traditional code. [H1]Improveding Sprite ManagementUsing the keyboard to control a sprite's behavior is one obvious way to spruce up your games. There are some other things that you can do to make your game much more interesting. The Simple Plane Demo program Here is a simple prototype of the biplane game that illustrates how to add keyboard input is added, as well as and a few other new features of sprite objects.[H2]Creating the Simple Plane ProgramFigure 10.5 shows this reasonably simple program, which demonstrates a number of new techniques.***PD: Please insert Figure jg10Fig05.pcx Simple Plane Figure 10.5 The program presents Here is a basic airplane with keyboard control and a 'rotating' propeller.This reasonably simple program demonstrates a number of new techniques.[H2]Using a Sprite as a Background ImageThe background image is actually a sprite with a cloud image set as its only image. There's are a number of reasons that why you might want to use a sprite as a background:***PD: begin bulleted unnumbered list[lb]* If you set the z value of the sprite very low, all other sprites will pass over it.[lb]* It is much easier to position a sprite than it is to position a normal HTML image.[lb]* If you wish, you can have multiple frames of the image to create have an animated background, or perhaps a series of different backgrounds (for example, maybe you could add a morning sky with a red background, or a night sky with stars). [lb]* You can use the clipping methods of the sprite object to support scrolling backgrounds. Check the gamelLib sprite documentation for information on using clipping.***PD: end unnumbered bulleted listHere's The beginning code of the Simple Plane Demo program. follows. Most of this code is very familiar. Take a look at the cloud sprite code. The program uses this sprite is being used as a background graphic.***PD: begin tipTo get a nice cloud texture, I used a fractal pattern generator in my image program, then tuned it up with a feathered brush. This is a pretty easy way to generate certain natural patterns, likesuch as clouds, waves, and certain types of mountains. Look in the documentation of your image editing software for information about any special effects tools that might be useful for game graphics.Author: Can you assume that your audience will know much about fractal pattern generator? Perhaps you should refer them to a source from which they can learn more about this topic. Unless they understand what such a generator is, the tip probably isn’t much help. – andy the copyeditorDo you think tips should be hints, too? Or should we create another element? MelodyI think hint would work fine here, at least. -Andy H.***PD: end tip***PD: Begin Code var plane; var clouds; var upKey; var downKey; var NORTH = 0; var NORTHEAST = 1; var EAST = 2; var SOUTHEAST = 3; var SOUTH = 4; var SOUTHWEST = 5; var WEST = 6; var NORTHWEST = 7; var direction = EAST; function init(){Sp_xoffset=100;Sp_yoffset=100; clouds = new Sp_Sprite(); clouds.setImage("clouds.gif", 500, 300, 1, 1); clouds.moveTo(0,0); clouds.setXlimits(0, 500); clouds.setYlimits(0, 300); clouds.setFrame(0); clouds.switchOn();***PD: End CodeThe plane and clouds variables will both contain sprites. upKey and downKey will hold keyboard handlers. The direction constants should be familiar from Chapter nine9, as should the direction variable.The Sp_xoffset and Sp_yoffset variables are special variables used in the sprite library. By giving values to these variables, you can specify a new origin for all sprites. This approach can be very useful for centering your game on the screen. All the other code in this segment sets up the clouds as normal sprites.[H2]Creating a More Involved Animation Graphic If you run the Simple Plane Demo program and look carefully at the biplane, you will notice that the propeller appears to spin. Now there are two versions of each plane picture:. There will be one picture of an airplane pointing east with a large propeller, and another picture that is identical, but with a smaller propeller. The program swaps quickly between these versions of the image to give the illusion of a moving propeller.This illusion is accomplished by another trick of the sprite object. Figure 10.6 shows Here is the actual aircraft picture in mythe graphics editor:. (Note that I increased the size of the graphic and added a blue background to make the image easier to see.)***PD: Please insert Figure jg10Fig06.pcx Plane1.gif in Gimp Figure 10.6 Now there are 2two images of the biplane for each direction.(Note that I increased the size of the graphic and added a blue background to make the image easier to see)Recall that sprites can have several frames, even though they only have only one image. The gamelLib API accomplishes this feat by clipping the image into a number of evenly -sized frames. In the last chapter, you created an image with eight frames by generating a graphic with eight evenly spaced images in a row. You can also specify another kind of animation by swapping a number of images within a frame. If you arrange your sprite graphic as I did here, you can animate each frame very easily. Just remember that each column represents the animations in a particular frame. Generally your code will explicitly set the frame, but you will automate the animations within the frame.***PD: begin notehintAlthough I chose to have only two animations per frame, you can have as many as you wish. In fact, you are not required to have the same number of animations in each frame. See the gamelLib documentation for details on how you control differing lengths of animations.***PD: end hintnote [H2]Incorporating Frame AnimationIf you look back at the init () function for the Simple Plane Demo program, you will see the plane sprite definition:***PD: Begin Code plane = new Sp_Sprite(); plane.setImage("plane1.gif", 20,20,8,2); plane.moveTo(0,100); plane.setSpeed(3); plane.setXYdegs(90); plane.setXlimits(0, 500); plane.setYlimits(0, 300); plane.bounces=false; plane.setFrame(direction); plane.setAnimationSpeed(3, "forward"); plane.collides = true; plane.switchOn();***PD: End CodeThis code looks very much like the car code from Chapter nine9, but there are a couple of subtle differences that which involve animation. First, note the difference in the setImage () method. The program instructs the sprite is instructed to use the "plane1.gif" image, size it to 20, 20, and gouse eight- by- two frames. If you compare this to the actual image, you will see that these parametersis should allow the display of eight different frames with two cells of animation apiece to be displayed. If you do not align up the number of sub-images on your graphic to those in the setImage () method, You must ensure that the number of images used in the graphic is the same as that referenced in the setImage() method. If the number of images is not the same as the value in the setImage() method call, the program will still work, but it will look very strange.Author: Second-to-last sentence: To what specifically do the two instances of “this” refer? Last sentence: Does “align the number of images” mean that you must position the images in both sources so that they align? If so, change it to “align the images,” since the number of images doesn’t appear to have anything to do with the alignment. Or, did you intend to state that the number of images must be the same in both the graphic and the method? If so, change the beginning of the sentence to “you must ensure that the number of images used in the graphic is the same as that referenced in the setImage() method,” or something similar (in particular, please eschew the use of “align” unless you actually are referring to some issue regarding the placement of graphic images). – andy the copyeditor***PD: begin notehintTo simplify this discussion, I will refer to the row of elements as frames (manipulated by the .setFrame() method) and the columns as cells. (manipulated by the setAnimation() method).***PD: end hintnoteThe other new effect wais the setAnimationSpeed() method call. This method of the sprite object takes two parameters. The first is the number of cycles to hold a cell on the screen. I set the value to 3, so each piece of the animation is visible for .15 seconds, which means meaning that the propeller image changes about six times a second. If you puset a larger value here, the image will animate more slowly. Smaller values cause the sprite to animate more quickly. The second parameter must contain the string "forward" or the string "back".. This parameter determines whether the animation will be run forward or backwards.Author: Fifth and sixth sentences, as well as the first sentence of the following paragraph: You seem to be using the verb “animate” as a synonym for “be drawn on the screen.” Webster’s doesn’t recognize this definition of “animate”; is it quasistandard usage in game designer lingo? It seems kind of awkward to me. – andy the copyeditorIn game development and other media programming, animation is usually seen as one or more of the following:Image swapping to give the illusion of motion (That's what's happening here)Moving an image or object around on the screen (that's happening too)Drawing directly on the screen using vector graphics commands (not supported in JavaScript). American Heritage Dictionary: pg. 111Animate: (5) to impart motion or activity to (6) To make, design, or produce (a cartoon for example) so as to create the illusion of motionDrawing on the screen is ultimately all we can do, but by doing that in clever deliberate ways, we are creating the illusion of motion.I think this is reasonable use of the term. -Andy H. The library automatically animates all the images that you have set in the column, unless you have instruct it to do otherwise instructed it.Table 10.3 describes the sprite animation commands that are available. ***PD: begin table Table 10.3 Sprite Animation Commands memberCommand Description Example .setImage( img , x , y , frames , cells ) Describes the number of animation cells in a specified frame. mySprite.setImage("car.gif", 10, 10, 2, 4); //2 frames, 4 animation cells each. .setAnimation( cell ) Sets the animation to a specified cell. mySprite.setAnimation(2); .setAnimationLoop( min , max ) Sets up the animation to display cells between min and max. mySprite.setAnimationRange(1,3); //animate but skip the 0th image. .setAnimationRepeat( times ) Determines how many times to repeat the animation. (-[nd]1 forspecifies an indefinite number of repeats). mySprite.setAnimationRepeat(4); //do the animation 4 times , then stop .setAnimationSpeed( speed , dir ) Determines the speed and direction in which to run the animation. speed determines how many cycles to hold each cell. dir can be “ " back ”" or “" forward ”." mySprite.setAnimationSpeed(20, "forward); change the cell animation once per second . ***PD: end table [H2]Adding Keyboard Input The remainder of the code in the init () function handles creating keyboard handlers and starting up the gamelLib engine:***PD: Begin Code//enable keyboard handling upKey = Kb_trapkey("v"); downKey = Kb_trapkey("f"); Gl_start(); Gl_hook("mainLoop()");} // end init ***PD: End Code [H2]Responding to the Keyboard InputThe code in the main loop is reasonably straightforward. All it does is check each key handler, and change the aircraft's position and direction accordingly. The cell animation is completely automatic.***PD: begin notehintI chose to model the behavior of an aircraft's joystick. When the pilot pushes the joystick forward, the plane's nose goes down, and when the joystick is pulled back, the nose goes up. It would be great if you could use the arrow keys, but JavaScript does not trap for any keys but the normal alphanumeric keys. I decided to go for a set of keys near the middle of the keyboard, and arrange them as if they were the control yoke of an aircraft. That's why the 'v' key pulls the nose up and the 'f' key points the nose down. If you don't like this arrangement, just assign different keys to up and down.Author: The beginning of the second-to-last sentence (“That’s why…”) suggests that you have explained why you chose the v and f keys, but I really don’t glean from this paragraph why you chose those particular keys. I understand that you are using the joystick as a model, but I don’t see how that model led you to choose the v and f keys. –andy the copyeditor***PD: end hintnote ***PD: Begin Code function mainLoop(){//check for keyboard inputs if (upKey.pressed){ direction--; if (direction < NORTH) { direction = NORTHWEST;} // end boundary check plane.setFrame(direction); plane.setXYdegs(direction * 45);} // end upkey if (downKey.pressed){ direction++; if (direction > NORTHWEST) { direction = NORTH;} // end boundary check plane.setFrame(direction); plane.setXYdegs(direction * 45);} // end downkey} // end main loop***PD: End Code[H1]Adding Missiles Although While it can be very pleasant to glide peacefully zoom around the sky, all this pastoral calm is no way to run a video game. It's time to shoot something![H2]Creating the Balloon Buster GameFigure 10.7 shows the Balloon Buster game, which Here is a variation of the plane game that adds a target (a balloon) and the ability to shoot at the target.***PD: Please insert Figure jg10Fig07.pcx target shooting at balloon Figure 10.7 Finally, a game with some needless violence!This variation of the game has a fire button and a balloon suitable for shooting. [H2]Initializing the SpritesIn addition to providing the cloud and plane sprites, I added two more sprites, the target and the bullet. Here is the code that initializes these two sprites:***PD: Begin Code target = new Sp_Sprite(); target.setImage("blimp.gif", 50, 50, 1,1); target.moveTo(50, 50); target.setSpeed(2); target.setXYdegs(90); target.setXlimits(0, 500); target.setYlimits(0, 300); target.bounces = true; target.setFrame(0); target.switchOn(); target.collides = true; bullet = new Sp_Sprite(); bullet.setImage("bullet.gif", 10, 10, 1, 1); bullet.setXlimits(0,500); bullet.setYlimits(0,300); bullet.bounces = false; bullet.setFrame(0); bullet.collides = true;***PD: End CodeThe target is a slow balloon. I set its speed to 2, and its initial direction to 90 degrees. I turned on the bounce s onfeature, so that the balloon will it would always simply bounce off the wall and stay in a predictable pattern. The bullet is a tiny sprite, also with only one image. It should not bounce, but stop when it reaches the edge of the boundary area. Both sprites check for collisions.[H2]Writing the Collision Detection RoutinesThe plane movement commands are exactly like those in the Simple Plane Demo program. All the new information has to do with firing the bullets and detecting collisions. Here is the additional code in the mainLoop () function:***PD: Begin Code if (fireKey.pressed){ bullet.moveTo(plane.x, plane.y); bullet.setSpeed(7); bullet.setXYdegs(plane.xydegs); bullet.switchOn();} // end fireKey//check for collisions if (plane.hit == target){ window.status = "crashed into target!!";} // end if if (bullet.hit == target){ window.status = "shot down target!!"; bullet.switchOff(); bullet.moveTo (600, 600);} // end if//check for bullet bounds if ((bullet.x >= bullet.xmax - bullet.width) || (bullet.x <= bullet.xmin) ||(bullet.y >= bullet.ymax - bullet.width) || (bullet.y <= bullet.ymin) ){ bullet.switchOff(); bullet.moveTo(600,600);} // end if***PD: End Code First, the program checks the fire key handler to see ifwhether the player has fired. If so, the bullet's initial direction and position are copied from the plane, and its speed is set to 7. This will causes the bullet to fly off in the current direction that the plane is going. Then the program checks for various collisions. If the bullet hit the target, something good should happen (good for the player, bad for the balloon). The program also checks for a collision between the balloon and vs. the plane collision, which would presumably be bad for both.***PD: begin notehintOf course, the code for this particular example here should could be far more robust. It would be nice to add code for some explosions and score-keeping functionality. Feel free to add those things if you wish. I chose to develop the game in another direction, so I left this code as it is. At a minimum, it's a good idea to include at least put the stub code that says "a collision occurred" so that you can go back and add actual functionality later if you wish. This type of code that serves as a placeholder for future development is sometimes called a "stub."Author: First sentence: “Here” refers specifically to the collision detecting code? Last sentence: What is “stub code”? – andy the copyeditor ***PD: end hintnote[H1]BackReturning to the Dogfight GameAs usual, this chapter has introduced all the required elements have been introduced to you, so all you have to do to seecreate the Dogfight game is put the pieces together. The only thing that's really new in the Dogfight game is the two- player capability. [H2]Creating the VariablesThis program involves four different libraries, so I imported them all. To shorten the code, I decided to make the planes and bullets into arrays. I had variables to handle the keystrokes, direction, and damage for each plane, as well as direction and damage variables for the planes. I also created a variable for the directions instructions and scoreboard (which will be layers) and for the sounds. Here’s the code that creates the variables:Author: Both the third and fourth sentences mention variables that handle direction. Is this an accidental repetition, or is there a reason for mentioning direction variables twice? – andy the copyeditor***PD: Begin Code<script language="Javascript" src="../gamelib196/gamelib/gamelib_core.js"></script><script language="Javascript" src="../gamelib196/gamelib/gamelib_sprites.js"></script> <script language = "Javascript" src="../gamelib196/gamelib/gamelib_keyboard.js"></script><script language = "Javascript" src="../gamelib196/gamelib/gamelib_sound.js"></script><script>//sprites var plane = new Array(2); var bullet = new Array(2); var cloud;//keyboard handling variables var up0; var dn0; var fire0; var up1; var dn1; var fire1;//scorekeeping variables var damage0 = 100; var damage1 = 100;//direction constants var NORTH = 0; var NORTHEAST = 1; var EAST = 2; var SOUTHEAST = 3; var SOUTH = 4; var SOUTHWEST = 5; var WEST = 6; var NORTHWEST = 7; var direction0 = EAST; var direction1 = WEST; var scoreboard;//sound var sndBang; var sndHit;***PD: End Code [H2]Setting Up the Keyboard and SoundsThe init() function has a lot of work to do. First, I set up sprite offsets, which are variables I will use, to make the program look more centered in the Web page. I then generated all the keyboard handlers with the Kb_trapkey() function. Next, I generated the sound files with the Sd_add_sound() function. Here’s the code: Author: Second sentence: I don’t recall any previous mention of “sprite offsets.” Are you sure that your audience will be familiar with this term? – andy the copyeditor***PD: Begin Code function init(){//set offsetsSp_xoffset = 100;Sp_yoffset = 100;//set up key traps up0 = Kb_trapkey("z"); dn0 = Kb_trapkey("q"); fire0 = Kb_trapkey("a"); up1 = Kb_trapkey("m"); dn1 = Kb_trapkey("o"); fire1 = Kb_trapkey("k");//set up sounds sndBang = new Sd_add_sound("bang.wav"); sndHit = new Sd_add_sound("hit.wav");***PD: End Code [H2]Setting Up the SpritesThe core elements of this game are the sprites. I chose to make arrays of both planes and bullets, to make the code a little shorter and easier to debug. The planes and bullets are nearly identical to those in the earlier plane programs, except that they are elements of arrays. Here’s the code:***PD: Begin Code//set up background graphic cloud = new Sp_Sprite(); cloud.setImage("clouds.gif", 500, 300, 1, 1); cloud.moveTo(0, 0); cloud.setXlimits(0, 500); cloud.setYlimits(0, 300); cloud.setFrame(0); cloud.switchOn(); for (i = 0; i < 2; i++){ plane[i] = new Sp_Sprite(); plane[i].setSpeed(3); plane[i].setXYdegs(90); plane[i].setXlimits(0, 500); plane[i].setYlimits(0, 300); plane[i].bounces = false; plane[i].setFrame(0) plane[i].setAnimationSpeed(3, "forward"); plane[i].collides = true; plane[i].switchOn(); bullet[i] = new Sp_Sprite(); bullet[i].setImage("bullet.gif", 10, 10, 1, 1); bullet[i].moveTo(-20, -20); bullet[i].setXlimits(-20,520); bullet[i].setYlimits(-20, 320); bullet[i].bounces = false; bullet[i].setFrame(0); bullet[i].collides = true; bullet[i].switchOn();} // end for loop plane[0].setImage("plane0.gif", 20, 20, 8, 2); plane[1].setImage("plane1.gif", 20, 20, 8, 2);***PD: End CodeI set up the initial images of the plane to be different graphics, so they would not be the same color.[H2]Setting Up the LayersThe scoreboard and the instructions are both layers. The scoreboard will be dynamically updated with the score. The instruction layer will simply sit there. The code for the instruction layer is long, but very simple, because it simply builds the HTML for the instructions. (I could have put the instructions in a simple HTML page and loaded it up, I suppose, but I liked having the HTML accessible here in the program for debugging purposes.). Here’s the code for the layers: ***PD: Begin Code//set up scoreboard layer scoreboard = new Gl_layer(0, 100, 100, ""); scoreboard.write("player 1 player 2"); scoreboard.show(); scoreboard.setXlimits(0,300); scoreboard.setYlimits(0,300); resetGame();//set up instruction layer var instructions = new Gl_layer(0, 150, 100, ""); var inText = ""; inText+= "<h3>Instructions</h3>"; inText+= "<table border = 1 bgcolor = white>"; inText+= "<tr><td>cmd</td>"; inText += "<td>red</td>"; inText += "<td>blue</blue></td></tr>"; inText+= "<tr><td>up</td>"; inText += "<td>m</td>"; inText += "<td>z</blue></td></tr>"; inText+= "<tr><td>down</td>"; inText += "<td>o</td>"; inText += "<td>q</blue></td></tr>"; inText+= "<tr><td>fire</td>"; inText += "<td>k</td>"; inText += "<td>a</blue></td></tr>"; inText+= "</table>"; inText+= ""; inText+= ""; instructions.write(inText); instructions.show();Gl_hook("mainLoop()");Gl_start();} // end init***PD: End CodeThe init() function closes with the expected hook () and start () functions.[H2]Writing the resetGame() FunctionThe program calls the resetGame()This function will be called when the game starts or restarts. It is responsible for resetting the score variables, and placing the planes in the appropriate starting positions. Here’s the function’s code:***PD: Begin Code function resetGame(){//starts up the main game variables direction0 = EAST; direction1 = WEST; damage0 = 100; damage1 = 100; plane[0].moveTo(10, 10); plane[0].setXYdegs(direction0 * 45); plane[0].setFrame(direction0); plane[1].moveTo(380, 10); plane[1].setXYdegs(direction1 * 45); plane[1].setFrame(direction1); writeScore();} // end resetGame***PD: End Code [H2]Checking for Direction Changes in the Main LoopThe main loop has a number of jobs that all involve checking for various events in the game. The first part of the function checks whether to see if either player has chosen to change the attitude of theirhis or her aircraft's attitude:Author: Last sentence: Should “attitude” be “altitude”? – andy the copyeditorIt's attitude. The altitude is a function of attitude. Point it up, it's going up. -Andy H. ***PD: Begin Code//check for direction key presses if (up0.pressed){ direction0--; if (direction0 < NORTH){ direction0 = NORTHWEST;} // end if} // end if if (dn0.pressed){ direction0++; if (direction0 > NORTHWEST){ direction0 = NORTH;} // end if} // end if if (up1.pressed){ direction1--; if (direction1 < NORTH){ direction1 = NORTHWEST;} // end if} // end if if (dn1.pressed){ direction1++; if (direction1 > NORTHWEST){ direction1 = NORTH;} // end if} // end if plane[0].setFrame(direction0); plane[1].setFrame(direction1); plane[0].setXYdegs(direction0 * 45); plane[1].setXYdegs(direction1 * 45);***PD: End CodeAfter setting up the directions are set up, you set up the planes are set up to use the appropriate frame, and set to the appropriate direction.[H2]Checking for Gunfire Now the main loop checks the fire keys to determine ifwhether either player is currently firing.: ***PD: Begin Code//check for bullet firing if (fire0.pressed){ sndBang.play(); bullet[0].moveTo(plane[0].x, plane[0].y); bullet[0].setXYdegs(plane[0].xydegs); bullet[0].setSpeed(10);} // end plane 0 fires if (fire1.pressed){ sndBang.play(); bullet[1].moveTo(plane[1].x, plane[1].y); bullet[1].setXYdegs(plane[1].xydegs); bullet[1].setSpeed(10);} // end plane 0 fires***PD: End CodeIf a player fired, the main loop sets the appropriate bullet is set into motion, and plays along with an appropriate sound effect.[H2]Checking for HitsIn this program, I decided only to check only for hits that involve the bullet striking the vs. plane hits. The code is reasonably straightforward:***PD: Begin Code//check for hits if (bullet[0].hasHit(plane[1])){ sndHit.play(); damage0--; writeScore();} // end if if (bullet[1].hasHit(plane[0])){ sndHit.play(); damage1--; writeScore(); } // end if} // end mainLoop***PD: End CodeWhen a hit has occursred, the function plays a sound and decrements the damage amount of the victim. It then calls the writeScore() function so that the players can tell what occurred. Each plane starts out at 100 percent functional. When the damage value falls below zero, the plane is destroyed.Author: Explain the effect of decrementing the damage amount. If a player reaches a certain amount, what happens to the player? – andy the copyeditor[H2]Creating the writeScore() FunctionThise writeScore() function writes a new score into the scoreboard layer. It also checks to see ifwhether either player’s plane has been destroyed, and sends appropriate messages.. Here’s the function’s code:***PD: Begin Code function writeScore(){ var scoreText = ""; scoreText += ""; scoreText += "red: " + damage0 + "% "; scoreText += "blue: " + damage1 + "%"; scoreText += ""; scoreboard.write(scoreText);//check for a win if (damage0 < 1){ alert("blue wins!!"); resetGame();} //end if if (damage1 < 1){ alert("red wins!!"); resetGame();} // end if} // end writeScore***PD: End Code[h1]SummaryIn this chapter, you have seen how you can improve sprites can be improved to handle cell animation. You have also learned how to respond to keyboard input, and how to add sound to your programs. You also learned how to use layers can be used to add dynamic content to your program, and how to use sprites as background graphics.[h1]Syntax Summary All the new syntax in this chapter was described where it was first used.Melody: Is this kosher? – andy the copyeditorAndy: I think we need to keep the Syntax Summary as a consistent element—even if the syntax has already been described within the text of the chapter. Otherwise, we should strip the summaries out of the book completely—or, we could combine them all into one big table in an appendix. What is your preference? MelodyI don't honestly know. In the earlier chapters, there was very little syntax, so it made more sense to summarize it at the end of the chapter. Here, there were a number of very different summaries. I think we need them somewhere. My gut is to move them closer to where they are used, and not make it a separate segment at the end of the chapter. If we have room, it'd be great to repeat them all together as an appendix. -Andy H. [h1]Exercises***PD: begin unnumbered listImprove the Balloon Buster game by adding explosion animations.Add a score-keeping function (or two) to the Balloon Buster game.Add keyboard handling to the Racering game from the last chapter.Write a version of "Space Invaders" in which the player controls a space ship that moves along the bottom of the screen. The aliens can be an array of sprites. Start with just one alien, then add more once the first is working correctly.Melody: Are there any copyright issues regarding the use of Space Invaders here? I italicized “Space Invaders” here, as I believe it’s a widely accepted convention to italicize video game names much like movie and book titles. Note, however, that I failed to italicize Pacman in the last two exercises in Chapter 9. I am hereby punishing myself accordingly. <ouch> – andy the copyeditorAndy: I’ll catch these when the chapters come back from author review. I don’t think we’ll have a copyright issue since you haven’t even created your own version of Space Invaders or used any copyrighted graphics. Melody***PD: end unnumbered list

Fjas;Dlkfjas;Dlfjas

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support