Experiment 7: Arrays

Transcription

1 Experiment 7: Arrays Introduction Until now, we ve been content with storing one value in one variable. What if you want to store lots of values? That s where arrays become useful. This experiment is going to examine a couple ways in which you can make and use arrays when programming a small game. Go ahead and make a new copy of the Perlenspiel Template folder in your PGF Projects folder, and name it Experiment 7 - Arrays. Open the game.js file and get ready to program! Setup The game we are making will involve a player pawn that moves up the screen past moving enemies in order to collect goals. After a goal is collected, the player starts at the bottom of the screen again. Hitting an enemy resets the player to the bottom of the screen. Let s start by defining some global variables that we are going to use in this game. We re going to use objects similar to how we used them in lesson 6. var GAME = w : 8, h : 12, // Speed of updates clock : 15, gridbackgroundcolor : 0x336699, running : true, ticking : false, ; The GAME object has properties for the width and height of the grid, the clock speed (which is used for updating the enemy positions), the background color of the page, and a boolean to remember if the game should be updating or not. This type of object initialization is called an object literal. The general syntax for this is: var ObjectName = property1 : "val1", property2 : "val2", property3 : "val3"; To make it easier to read, you can put each property/value pair on its own line: var ObjectName = property1 : "val1", property2 : "val2", property3 : "val3" ; PGF: Experiment 7 Arrays Pg. 1

2 Note that you won t need this specific object in your program it is merely an example of the syntax. Put it in your notes! The properties are like variable names, and the values are the value that each property is initialized to in the object. Each pair needs a colon between them, though the spaces are optional. The list of pairs itself is commaseparated. The last pair doesn t need a comma after it. Note that the above example won t actually run you would need to define the values, or use numbers and strings in their place. Here s another object that we will need so that we can track the player s location and stats: // Player tracking var PLAYER = numprizesleft : 0, starty : GAME.h-2, // These are given values in ResetGame x : 0, y : 0, The PLAYER properties should be pretty self-explanatory. At any rate, we ll see how they are used later. PS.init PS.init needs some code to set up the grid how we want it: // PS.init( system, options ) // Initializes the game PS.init = function (system, options) "use strict"; PS.gridSize(GAME.w, GAME.h); // replace with your own x/y values // Add any other initialization code you need here PS.fade(PS.ALL, PS.ALL, 0); PS.statusFade(0); ; // Load audio PS.audioLoad("fx_bucket"); PS.audioLoad("fx_bloop"); PS.audioLoad("fx_ding"); This is pretty straight-forward. Set the grid size, turn off the annoying bead and status flashing, and load some audio for later. PGF: Experiment 7 Arrays Pg. 2

3 Drawing the Grid For this game to look polished, we ll need to draw some stuff in the grid. First, a function that resets a bead to its empty state, including a neutral gray color: // Erases everything in a bead function EraseBead(x, y) PS.data(x, y, 0); PS.color(x, y, 0x858585); PS.glyph(x, y, 0); PS.border(x, y, 0); Note how it uses x and y parameters so that the caller can use it at any location. This makes the function useful for more than one thing. We ll also need a function to draw the player bead. This code goes in the functions area as well. // Draws the player pawn function DrawPawn(x, y) PS.data(x, y, "pawn"); PS.glyphColor(x, y, 0xFFFFFF); PS.glyph(x, y, "O"); This will draw a white O in the specified bead. PGF: Experiment 7 Arrays Pg. 3

4 The next function is one that we can call from PS.init to reset the game state. // Sets up the initial player, game, and board state function ResetGame() GAME.running = true; PLAYER.x = 4; PLAYER.y = PLAYER.startY; PLAYER.numGoalsLeft = 0; // Draw the board DrawPlayingField(); // Draw the player at their initial position DrawPawn(PLAYER.x, PLAYER.y); // Start the timer function if (GAME.ticking == false) GAME.ticking = true; PS.timerStart(GAME.clock, GameUpdate); First, it sets the GAME.running variable to true. This doesn t do anything yet, but it will be important later. It s going to be used to keep track of whether the game is being played or whether the game is paused due to the player having completed it. Right now, know that setting it to true means that the player will be able to play the game. Next, it sets the PLAYER object s properties to some starting values. PLAYER.numGoalsLeft is the number of goals the player has to collect. It will remain at zero until the goals are actually placed in the grid, which will be later in this document. Then, it calls the function DrawPlayingField. That function is shown below (make sure you place this in the functions area as well): function DrawPlayingField() // Set background color of the page PS.gridColor(GAME.gridBackgroundColor); // Erase the board EraseBead(PS.ALL, PS.ALL); This function sets the background color of the page and then erases all beads in the grid. Note that PS.ALL can be used even in custom functions but only if those parameters are used in places where PS.ALL makes sense. PGF: Experiment 7 Arrays Pg. 4

5 Back to ResetGame: There is some code to draw the pawn. This way the pawn is visible right when the game starts, before the player has taken any action. Finally, a new function: PS.timerStart. This function allows you to create timed code that runs even if the player isn t doing anything. The first parameter is the number of 1/60ths of a second between calls of the timer function. The timer function is the second parameter, which is actually a reference to a function. GameUpdate doesn t exist yet, so let s create that: // This function is called by a timer function GameUpdate() It ll be empty for now, but that s fine. To set this all in motion, add a function call to ResetGame() at the end of PS.init. Now when you run the program, you should see a grey area with the player object near the middle bottom. The page should have a blue background. No interaction will be working yet, though! Player Movement The player will need to be able to move in this game, just like it did in lesson 6. To do this, let s write a function that handles just the player movement. function MovePlayer(key) // Remember the old player location var oldx = PLAYER.x; var oldy = PLAYER.y; // Erase the player at their previous position EraseBead(PLAYER.x, PLAYER.y); if( key == PS.KEY_ARROW_RIGHT && (PLAYER.x < (GAME.w - 1)) ) PLAYER.x += 1; else if( key == PS.KEY_ARROW_LEFT && (PLAYER.x > 0) ) PLAYER.x -= 1; else if( key == PS.KEY_ARROW_UP && (PLAYER.y > 0) ) PLAYER.y -= 1; else if( key == PS.KEY_ARROW_DOWN && (PLAYER.y < (GAME.h - 1)) ) PLAYER.y += 1; // Draw the player at their location DrawPawn(PLAYER.x, PLAYER.y); PGF: Experiment 7 Arrays Pg. 5

6 This is mostly the same as the standard code from lesson 6. To kick it off, add a call to MovePlayer() in PS.keyDown. // PS.keyDown ( key, shift, ctrl, options ) // Called when a key on the keyboard is pressed PS.keyDown = function (key, shift, ctrl, options) "use strict"; // Uncomment the following line to inspect parameters //PS.debug( "PS.keyDown(): key = " + key + ", shift = " + shift + ", ctrl = " + ctrl + "\n" ); ; // Add code here for when a key is pressed MovePlayer(key); That s a lot of setup, but the player should be able to finally move. Test it now and make sure that the player can t escape from the playing area. Walls Let s add some wall beads around the border of the playing area. Here is a drawing function for them: // Impassable grey walls function DrawWall(x, y) PS.data(x, y, "wall"); PS.color(x, y, 0x454545); Feel free to make the walls fancier than this. Use this function to draw walls along the four edges of the grid. This code can go into DrawPlayingField: // Draw four walls DrawWall(0, PS.ALL); DrawWall(GAME.w-1, PS.ALL); DrawWall(PS.ALL, GAME.h-1); DrawWall(PS.ALL, 0); This places the walls, but we need to also keep the player from passing through them. You can again use code from lesson 6. PGF: Experiment 7 Arrays Pg. 6

7 This code will be a modification to MovePlayer - make sure it s placed after the if/else-if block, but before the DrawPawn call: // Get the bead data from the player's new location var dataatplayer = PS.data(PLAYER.x, PLAYER.y); // If it was a wall, print something and reset the player position if( dataatplayer == "wall" ) // Rewind so the player doesn't go through the wall PLAYER.x = oldx; PLAYER.y = oldy; // Draw the player at their location DrawPawn(PLAYER.x, PLAYER.y); Test it out! The player should no longer be able to walk into the wall beads. One Hundred Enemies If we were making a game with a single enemy, planning out the code would be rather simple. You could create a global object named ENEMY, give it some coordinates, and put some logic in GameUpdate to make it move around depending on what you want it to do and where the player is. Let s say your project lead stops by and asks you to add a second enemy, since single-enemy games are out of style right now, and having more moving enemies will make the game more dynamic. We got this, of course simply make a copy of ENEMY, naming the first one ENEMY0 and the second ENEMY1. Then, you can make a copy of the code in GameUpdate so that both enemies have the same movement and behaviors. After a couple hours, the lead stops by again with great news they landed a contract! However, the contract is for a game with one hundred enemies. While you could technically make 100 objects and 100 copies of the ENEMY movement code, this is clearly not a good way to go about things. It would be a nightmare to debug code that has an ENEMY0, ENEMY1, ENEMY2, etc., any of which might have a typo or bug in it. What s the correct way to solve this programming nightmare? How do you keep track of a hundred, a thousand, a million things that are all the same type? Luckily, JavaScript, along with most programming languages, has a useful type of variable called an Array. An array is a container that can hold variables inside it in a list or table format. While you can store many different types of variables in one array, they are most useful when storing a list of variables which are all the same type or have something to do with each other. A great example would be to store our list of enemies instead of making 100 enemy variables, you make one ENEMIES array and fill it with as many enemies as you d like. Then, you can use for-loops to process, update, and draw all of the enemies. Adding more enemies or removing enemies won t affect the updating code, since you can set up the for-loop to operate the same regardless of how many variables are inside the array. PGF: Experiment 7 Arrays Pg. 7

8 An Array of Enemies Arrays are declared similar to any other variable, with the var keyword. To initialize it to a value, however, you need to do something new. Specifically, we re going to use the new keyword. Place this code right after the GAME and PLAYER objects: // Enemy tracking var monx = new Array(); var mony = new Array(); var mondir = new Array(); These three variables are going to be used to keep track of every monster/enemy in the game. Since each monster will have an x location, a y location, and a direction, we need one array for each of those things. These arrays are currently empty, but that s because we haven t made any monsters. We also don t have a function for drawing monsters! Let s write one: // Draw a monster function DrawMonster(x, y) PS.data(x, y, "monster"); PS.glyphColor(x, y, PS.COLOR_BLACK); PS.glyph(x, y, "#"); This will draw a black # in the specified bead, representing our enemy. There are two new ideas that we will need to implement in order to get monsters showing up. First, we need to put values into the enemy tracking arrays (monx, mony, mondir) so that each monster is tracked. Then, we need to loop over those arrays and display the monsters with the DrawMonster function. // Spawn a monster by adding it to the arrays and then drawing it function SpawnMonster(x, y, dir) monx.push(x); mony.push(y); mondir.push(dir); DrawMonster(x, y); What is.push? It s a method, which is a type of function that is attached to an object. In this case, all Array variables are also objects ones that have the push function, along with several other useful methods. It takes the parameter passed into it and appends it to the end of the array, increasing the array s length by one in the process. If you push a value into an array, and then look in the array, you ll see the new value at the end. In order to see this happen, it s useful to use the console to print out the contents of the arrays while working on them. Start up the game and open the debug console. PGF: Experiment 7 Arrays Pg. 8

9 Remember, you can open the console by right-clicking in the playing area, then selecting Inspect Element, and then clicking on the Console tab. Once there, try typing: > monx The console will print out: [] This is the friendly version of what an empty array looks like. The square brackets are like a box, and right now nothing is in them. If you type mony or mondir to view them, they will also be empty. Try typing this, next: > SpawnMonster(4, 2, 1); This will print out a monster on the grid at location 4,2, but it will also add elements to all three arrays. PGF: Experiment 7 Arrays Pg. 9

10 The array monx now has the number 4 in it, mony has the number 2, and mondir has the number 1. You can see them printed out in the following image: Let s spawn some more monsters, then look at monx and mony: > SpawnMonster(4, 3, 1); > SpawnMonster(5, 2, 1); > SpawnMonster(6, 4, -1); > SpawnMonster(1, 4, -1); Including the first SpawnMonster call above, there are now five Monsters on the grid. PGF: Experiment 7 Arrays Pg. 10

11 Next, let s look at the arrays: > monx [4, 4, 5, 6, 1] > mony [2, 3, 2, 4, 4] > mondir [1, 1, 1, -1, -1] As you can see, each array now has 5 elements, listed in the same order that the monsters were spawned. This code looks to be ready for the level setup, so write this into the DrawPlayingField function so that the monsters spawn when the game starts: // Spawn new enemies SpawnMonster(1, 2, 1); SpawnMonster(3, 3, -1); SpawnMonster(4, 5, 1); SpawnMonster(6, 7, -1); SpawnMonster(4, 9, -1); You should place this code at the end of DrawPlayingField. Your game should now look like the image on the right. If not, go back and make sure that your code matches the examples. PGF: Experiment 7 Arrays Pg. 11

12 Monster Mover Now that we have monsters stored in their arrays, we can write some code to move them around. There is no magic here moving a monster simply means to adjust its coordinate, while also erasing it from the old location, and drawing it in the new location. Since we want this to happen on its own at regular intervals, we will be using the timer functions in Perlenspiel. The timer function will call an Update function which will loop through the monsters and update each one. Here is the function, complete with a debug printout for the monster locations: // Moves the monsters around function UpdateMonsters() // Erase all monsters for( var i = 0; i < monx.length; i++ ) EraseBead( monx[i], mony[i] ); // TODO: Move all monsters // Clear the debug window so that it doesn't fill up PS.debugClear(); // Draw all monsters for( var i = 0; i < monx.length; i++ ) PS.debug("Monster " + i + ": " + monx[i] + ", " + mony[i] + "\n"); DrawMonster( monx[i], mony[i] ); This code has some new syntax square brackets. This is how you can access a specific element from inside of an array. The number or value inside the square brackets indicates the index that you are accessing. Arrays always start at index 0, so our arrays with 5 items have the possible indexes of 0, 1, 2, 3, and 4. Accessing an array beyond its largest valid index can cause some odd behavior in your program, so be wary of it! The special property.length can always tell you the exact number of elements in an array. This is incredibly valuable when using them in for-loops like this where you want to look at every individual element of the arrays. The for-loops used in this function are using a technique called looping through an array. The variable i is both the looping variable and the index of the array. By writing monx[i] and mony[i], the item at index i of each array is accessed and sent to the EraseBead and DrawMonster functions. Array indexes always start at zero, which is why the for-loops start at zero. PGF: Experiment 7 Arrays Pg. 12

13 Here is the function being called in GameUpdate: // This function is called by a timer function GameUpdate() UpdateMonsters(); When you run this, you ll see the debug printout for the different monsters. It will print out again every quarter second (our clock speed is 15/60), but the code also erases the debug log before each printout, so you will only ever see the most recent coordinates. Even though it doesn t appear to do anything yet, UpdateMonsters() is laid out so that we can make changes to each monster s location quite easily. It is divided up into three sections one that erases all of the monsters, one that will eventually move the monsters, and one that draws all of the monsters. Since the updating happens after the erase and before the draw, it will give the illusion of movement, just like the keyboard movement examples from lesson 6. Let s get some movement happening. Write another for-loop in the UpdateMonsters function, this time between the erase and draw loops: // Move all monsters for( var i = 0; i < monx.length; i++ ) // This is where the motion happens! Inside the body of the loop, we have access to the following useful information: The index of the current monster, i The x-location of that monster, monx[i] The y-location of that monster, mony[i] The direction that monster is going, mondir[i] What we can do right now is look at the direction of the monster and adjust its x-location appropriately. Since I chose the values for mondir carefully, we can simply add its values to that of monx: // Move all monsters for( var i = 0; i < monx.length; i++ ) // Move in the direction specified monx[i] += mondir[i]; If you run this, you ll notice the monsters move towards the edges of the grid and escape. Then, there will be a barrage of uh ohs. Go ahead and close the tab now, I won t mind. PGF: Experiment 7 Arrays Pg. 13

14 Let s write some code to keep the monsters inside the visible area: // Move all monsters for( var i = 0; i < monx.length; i++ ) // Move in the direction specified monx[i] += mondir[i]; var dataatmonster = PS.data( monx[i], mony[i] ); // Monster hit a wall if( dataatmonster == "wall" ) // Backtrack one space monx[i] -= mondir[i]; // Flip the direction mondir[i] *= -1; This code will examine the data inside the bead that the monster is going towards, and if it s a wall, it will do two things: 1. Move backwards one space with respect to the direction it was moving. This way it won t end up in the wall. 2. Flip the direction (if it was 1 it will be -1, if it was -1 it will be 1). This way it will be moving away from the wall during the next tick. This is exciting stuff! Test the program and play around with it for a little bit, see what else we need to make this a game. We ll get to that shortly! While you re thinking about it, this is a good time to revisit chapter 4 of Eloquent JavaScript, or chapter 11 of JavaScript: A Beginner s Guide, whichever book you are using. See if you can understand Arrays a bit better now! PGF: Experiment 7 Arrays Pg. 14

15 Just to make sure you re caught up, here s the entire UpdateMonsters function: // Moves the monsters around function UpdateMonsters() // Erase all monsters for( var i = 0; i < monx.length; i++ ) EraseBead( monx[i], mony[i] ); // Move all monsters for( var i = 0; i < monx.length; i++ ) // Move in the direction specified monx[i] += mondir[i]; var dataatmonster = PS.data( monx[i], mony[i] ); // Monster hit a wall if( dataatmonster == "wall" ) // Backtrack one space monx[i] -= mondir[i]; // Flip the direction mondir[i] *= -1; // Clear the debug window so that it doesn't fill up PS.debugClear(); // Draw all monsters for( var i = 0; i < monx.length; i++ ) PS.debug("Monster " + i + ": " + monx[i] + ", " + mony[i] + "\n"); DrawMonster( monx[i], mony[i] ); PGF: Experiment 7 Arrays Pg. 15

16 Here s how it looks when you run the game: The monsters will move back and forth, displaying their locations in the debug box as they update. PGF: Experiment 7 Arrays Pg. 16

17 Collisions Now that we have moving monsters and a moving player, we need to get them to interact with each other. This will work similar to how the player interactions worked in lesson 6, although now we have multiple moving entities that all care about where they are going and what they are bumping into. We ll start by making it so that monsters act similar to walls when the player bumps into them. This prevents the player from walking right through the monsters. Add this code in MovePlayer after the wall check for the player: // If the player hits a monster... if( dataatplayer == "monster" ) // Rewind so the player doesn't go through monster PLAYER.x = oldx; PLAYER.y = oldy; If you try this out, you ll notice that you can t walk INTO the monsters, but they can still move into you just fine. They also don t hamper the player in any meaningful way, but we ll address that later. To fix the lack of collisions, we can add a check in the monster s movement code to detect when they hit the player. Place this new code in the UpdateMonsters() function after the wall check: // Monster hit the player if( dataatmonster == "pawn" ) // Backtrack one space monx[i] -= mondir[i]; // Flip the direction mondir[i] *= -1; Try it out! The player and monsters should no longer be able to overlap each other in any circumstance. You can even pin monsters against a wall, eternally turning around since something is in the way. Next, we need to make something meaningful happen to the player when they collide with a monster. We ll write this in a new function, named KillPlayer(). // If the player pawn ran into a monster, call this function to reset them function KillPlayer() PS.audioPlay("fx_bucket"); EraseBead(PLAYER.x, PLAYER.y); // Put the player at the beginning PLAYER.y = PLAYER.startY; DrawPawn(PLAYER.x, PLAYER.y); PGF: Experiment 7 Arrays Pg. 17

18 What does this function involve? First, a sound is played this is feedback for the player so that they can tell that their player pawn kicked the bucket. Next, the player s current position is erased. This is the position that the player was in when they ran into the monster. After this, the player s y coordinate is changed so that the player is back on the starting row. Finally, the player pawn is redrawn, so that they appear at their starting location immediately. If you leave this last line off, the player will be invisible until they make a movement. As mentioned in the comment at the header of this function, this function needs to be called wherever the player and monster collide. Let s update the two locations. The first is in MovePlayer, right after the player position is reset: // If the player hits a monster... if( dataatplayer == "monster" ) // Rewind so the player doesn't go through monster PLAYER.x = oldx; PLAYER.y = oldy; KillPlayer(); The second is in UpdateMonsters() after the monster s direction is flipped: // Monster hit the player if( dataatmonster == "pawn" ) // Backtrack one space monx[i] -= mondir[i]; // Flip the direction mondir[i] *= -1; KillPlayer(); If you test it out, you ll find that now it s a pretty big challenge to get to the top of the board without getting hit by one of the monsters. Objectives The next step in this game is to create a goal for the player. We re going to make it work like Frogger, so that the player has to traverse the dangerous area multiple times. In Frogger, there is a collection of goal tiles at the top of the screen. When the player navigates to one, it s collected and the player is placed back at the bottom of the screen for another go-around. This continues until all of the goals have been collected. To implement this in Perlenspiel, we need the following things: A couple goal squares for the player to get to A player stat to keep track of how many goals are left PGF: Experiment 7 Arrays Pg. 18

19 When the player hits a goal square: o Play a sound o Change the goal square to a collected goal square, which the player can t move into o Subtract one from the goals left player stat o Move the player back to the starting row When the player hits a collected goal square: o Treat it like a wall We can start by creating the actual goal squares, as well as their completed counterpart. Like most features of this game, we can define a DrawGoal function and a DrawCompletedGoal function, like this: // Destination goal squares function DrawGoal(x, y) PS.data(x, y, "goal"); PS.glyphColor(x, y, 0x99EE11); PS.glyph(x, y, "$"); This draws a green dollar sign. // A goal square after being picked up function DrawCompletedGoal(x, y) PS.data(x, y, "wall"); // It's a wall so that the player can't go in PS.glyph(x, y, " "); PS.glyphColor(x, y, 0xFFFFFF); This draws a white star. It has the same bead data as a wall, which lets us piggy-back on the player/wall and monster/wall movement code thus preventing them from moving into a collected goal. To make the goals start out on the grid, add some code to DrawPlayingField to place them in the top empty row. Place this code at the end of that function. // Draw the correct number of goals for( var x = 1; x < GAME.w-1; x++ ) DrawGoal(x, 1); PGF: Experiment 7 Arrays Pg. 19

20 If you test your game, the goals show up. Here s how it looks: Right now, the goals don t have any interactions yet. We need to add a condition in MovePlayer that checks to see if the player bumped into a goal. // Player made it to the goal if( dataatplayer == "goal" ) // Collect that square DrawCompletedGoal(PLAYER.x, PLAYER.y); // Put the player at the beginning PLAYER.y = PLAYER.startY; This logic can go after the dataatplayer == "monster" if-statement. It uses most of the same pieces of logic we ve already used. When the player moves into the goal, this means the player is standing on top of the goal (briefly), so we can draw a completed goal there. Then, move the player s y-coordinate back to the starting row. This will cause the player to have to move up through the dangerous middle area a total of six times to collect all of the goals. Is this too many times? Well, you can be the judge of that! However, there currently isn t anything that is keeping track of how many are left on the board. Luckily, we made a player stat called PLAYER.numGoalsLeft which we can use to store how many there are remaining. It s already initialized to zero when the game loads, and we can add to it whenever a goal bead is placed. This code will go into the bottom of the DrawGoal function: // Add one to the number of goals that the player has to collect PLAYER.numGoalsLeft++; PGF: Experiment 7 Arrays Pg. 20

21 Now, whenever you draw a new goal in the level, the number of goals left is incremented. It will automatically keep track! Next, we need remove goals from this number as they are collected. In other words, we will subtract one from, or decrement, PLAYER.numGoalsLeft. We will know if the last one was collected when the number reaches zero. We ll put all of this functionality into a new function named Score, and then invoke it when the player runs into a goal. function Score() // Subtract from the number left PLAYER.numGoalsLeft--; PS.audioPlay("fx_bloop"); if( PLAYER.numGoalsLeft <= 0 ) // The player won! PS.statusText("Congrats! Press R to restart."); PS.gridColor(PS.COLOR_WHITE); PS.audioPlay("fx_ding"); Here s what happens: First, it decrements the number of goals left. A sound plays for feedback. Next, there s a comparison to see if the number of goals left is less than or equal to zero. If it s true, it means that the player has collected all of the goals, and we can display a victory message, set the entire screen to have a white background, and play a ding sound. This Score() function needs to be invoked in MovePlayer, inside of the if-statement for colliding with a goal: // Player made it to the goal if( dataatplayer == "goal" ) // Collect that square DrawCompletedGoal(PLAYER.x, PLAYER.y); Score(); // Put the player at the beginning PLAYER.y = PLAYER.startY; This is enough to be able to test and complete an entire game from beginning to end. The game is inching towards completion! However, the game is still running after collecting the final goal, and there s no way to reset. Let s look at those next! PGF: Experiment 7 Arrays Pg. 21

22 Game State Keeping track of what a game as a whole should be doing is an important facet of game development. In this game we only need two states one for the regular gameplay, and one for the victory condition. This is an additional requirement we can add to our list from above: When the final goal square is collected: o Stop all player inputs o Display a victory screen o Allow the player to reset by pressing R The concept of a game state is different in various game engines. Many have a lot of built-in features that allow you to separate out functionality and levels into discrete packages that run independently from each other, and provide routines that load into any game state that you wish with a single function call. In Perlenspiel, none of this is built-in, but we can write it ourselves, provided we stay organized. Most of the separation between the running and victory states can be handled with simple if-statements that ask whether the game is running or not. Let s rewind a bit and look at our GAME object back in the global variables: /* Game Data */ var GAME = w : 8, h : 12, // Speed of updates clock : 15, gridbackgroundcolor : 0x336699, running : true, ticking : false, ; This underlined variable, GAME.running, may have been created at the beginning of this experiment, but I intended all along for it to be used for this purpose! As you can see, it starts out with the value of true, which we will use to mean that the game should be running when it first loads. This part is already working, of course. The additions we ll need to make will have to do with setting GAME.running to false, and then preventing the game from continuing as long as it remains false. Finally, we ll provide a way for the player to reset the game, by setting GAME.running back to true, placing the player at their start location, and resetting the goals. PGF: Experiment 7 Arrays Pg. 22

23 Where does GAME.running get set to false? Well, we need to do this when the player wins, so it can go into the same if-statement body in the Score() function that displays the Congrats! message. if( PLAYER.numGoalsLeft <= 0 ) // Stop the game GAME.running = false; // The player won! PS.statusText("Congrats! Press R to restart."); PS.gridColor(PS.COLOR_WHITE); PS.audioPlay("fx_ding"); I ve underlined the new code that you need to add. Next, we need to do something with this variable. Right now it turns on and off, but it doesn t actually stop the game from running. First, though, we need to know what it means that the game is running. It means that the player can move around, and that the enemies can move around. Where is this controlled? Looks like it s PS.keyDown and GameUpdate, respectively. We can prevent either action from happening by using simple if-statements. Here s the if-statement you ll write in PS.keyDown: if( GAME.running ) MovePlayer(key); This new if-statement makes sense if you just read it out loud, with some adjustments to make it sound correct, of course. This code says, If the game is running, move the player. Looks good! Before we continue, we can add some code here that resets the game. One important thing here is to make sure that this only happens if the game is NOT running. Sounds like a job for an else! PGF: Experiment 7 Arrays Pg. 23

24 // PS.keyDown ( key, shift, ctrl, options ) // Called when a key on the keyboard is pressed PS.keyDown = function (key, shift, ctrl, options) "use strict"; // Uncomment the following line to inspect parameters //PS.debug( "PS.keyDown(): key = " + key + ", shift = " + shift + ", ctrl = " + ctrl + "\n" ); ; // Add code here for when a key is pressed if( GAME.running ) MovePlayer(key); else // Game not running if( key == 114 ) // The 'r' key to reset ResetGame(); Go ahead and test it! After you win, the controls are disabled, and you can restart by pressing r on the keyboard. The number 114 in the code is the ASCII character code for the lower case r. You can read more about ASCII here: There are a couple problems remaining, though. The enemies keep on going, and they also duplicate themselves when the game restarts. The status text message gets stuck on Congrats!. We have some work left to do! Two of the problems can be fixed in ResetGame(). We need to set the status text to, well, anything at all. I ll use it to write a title for the game. // Set the status text PS.statusText("Get the Cash"); The problem with the duplicating enemies is caused by the arrays not being emptied out before new monsters are pushed in. You can empty an array by assigning it a new Array(), similar to how they were initialized in the first place. // Delete enemies monx = new Array(); mony = new Array(); mondir = new Array(); Put this code anywhere into ResetGame as long as it s before the call to DrawPlayingField, since that s PGF: Experiment 7 Arrays Pg. 24

25 where the monsters are spawned or respawned. It wouldn t work well if you spawned them first and then erased them afterwards. If you test your game now, the major bugs with the reset are all fixed. Next, we can turn off the monster updates if the game isn t running. This is a simple addition to GameUpdate to ensure that they only move while the GAME.running variable is true. // This function is called by a timer function GameUpdate() if( GAME.running ) UpdateMonsters(); Looks almost the same as the change we made to PS.keyDown. The game is pretty much feature-complete, but there are still some more polish items to take care of. First, the pawn should probably just disappear when the game is completed. We can prevent it from drawing during that last move by putting an if-statement around the call to DrawPawn at the end of the MovePlayer function. Like this: // Draw the player at their location if( GAME.running ) DrawPawn(PLAYER.x, PLAYER.y); We ve gotten a lot of mileage out of this one if-statement. It s a useful construct! Take notes about it! Finally, remove the PS.debug calls so that there isn t a clutter below the game. The game is complete! Or is it? PGF: Experiment 7 Arrays Pg. 25

26 Extending the Game Where do we go from here? There are a couple areas in this game that could use some work, if you were to try to make it more of a proper game, you might want to add lives or health, ways to destroy or spawn new enemies, or possibly even have different level layouts in order to provide difficulty progression. Some of these features are fairly straightforward and can be added on top of the existing functionality without modifying anything that s already there. Some, however, like the additional level layouts, may require a significant addition to the architecture of the game. For instance, you will need to store which level the player is on, and have clean transitions between the levels, including intermediary states. Here are some examples: Idea Implementation Lives System Global variable to store the number of lives Function to display the number of lives Subtract a life when the player is killed When the lives reach zero, end the game Reset the lives when the game restarts Difficulty Progression: Levels Global variable to store which level is currently loaded Function to display/load a particular level When a level is completed, advance to the next one When the last level is completed, the game ends Difficulty Progression: Enemies Array of enemy locations to spawn in When a goal is collected, take the first location and spawn an extra enemy there. Then remove this element from the array. When the game is reset, also reset this array Conclusion That ends things for this experiment. As always, feel free to explore and extend this project until you are fully satisfied with what you ve created. Arrays are a crucial data structure in many programming languages. They can allow you to store multitudes of data, which can be added to, deleted, or modified in real-time as someone interacts with your program. What I ve shown you here is only the surface of what you can make using arrays and the PS.startTimer function. Pretty much any serious game effort in Perlenspiel will use both of these parts. Happy experimenting! PGF: Experiment 7 Arrays Pg. 26