2. Uniqueness of the Approach
Wu’s Castle was developed in RPG Maker XP, a 2-dimensional role-playing game development program that allows developers to quickly build games through drag-and-drop map and event editing and Ruby script programming. The game was developed using a rapid-prototyping and testing iteration cycle as described in [15].Wu’s Castle contains two main types of interaction: one for manipulating arrays by changing For Loop parameters, the other for physically walking the game character through the execution of nested loops. In the game, the player is first introduced to the story and the game interface. In Level 1, the player explores one-dimensional array manipulation using for loops. In Level 2, the player walks his or her character through a nested loop, and the player is asked multiple-choice questions about the loop’s code; such as, “Which variable controls the outer loop?” In Level 3, the player uses nested for loops to modify two-dimensional arrays.
2.1 Array manipulation (Levels 1 & 3)
In Levels 1 and 3 the player uses a magical creature called a machina to create armies of snowmen and escape a mirror universe. To build the snowmen, the player must manipulate an array of values that describe the type of snowman at each position. The array is represented in the game as a line or grid of snowman characters. In each position, there might be no snowman, a regular snowman, a snowman with arms, a snowman with a hat, or a knocked-over snowman.
Wu’s Castle provides the structure of a For Loop in C++ and allows the player to change the initial condition, stopping condition, and step size. The player then chooses the body of the loop and watches the loop execute. The player’s code is a set of instructions telling the machina which array positions to visit (through loop parameters) and what snowman to place in each position (through the loop body). As she executes her instructions, the player watches how she changes the array. Her travel through the array visualizes how the parameters of the For Loop control her movement, and what positions in the array are visited. Her animation placing a certain type of snowman at each position demonstrates the body of the For Loop.
Figure 1 shows the for loop as the player has set its parameters: for(i=0; i<=19; i=i+1) array[i] = Snowman. The player selected the start, end, and increment values, and the machina is halfway through creating a row of 20 snowmen. Figure 2 shows the player choosing the body of a nested loop to create 40 snowmen.
Figure 1: The machina executing code in Level 1, showing half of the array updated during Mission 1
In the underlying code, the student’s constructed For Loop is run to modify an array that controls the snowmen drawn at each position. This dynamic implementation allows the player to visualize the actual effects of changing loop parameters. We carefully adjusted the timing of the animation so the machina would not travel too quickly; making the visualization more clear.
Figure 2: Selecting the body of a nested loop in Level 3
Table 1 shows Level 1 missions. The player must complete each mission in order to move on to the next, more challenging mission. Level 3’s missions follow a similar progression through filling a whole 2-dimensional array, certain rows, certain columns, and finally combinations of subsections, rows and columns. This progression was designed to demonstrate typical for loops and illustrate how changes in the parameters affect the loops.
Table 1: Level 1 missions showing loop parameters
|
Mission |
Start |
Stop |
Step |
|
Edit the entire
array (Figure 1) |
0 |
19 |
1 |
|
Edit even array
positions |
0 |
19 |
2 |
|
Edit odd
positions |
1 |
19 |
2 |
|
Edit a
subsection of the array |
3 |
17 |
1 |
|
Edit every 3rd
pos. in subsection |
5 |
10 |
3 |
2.2 Nested Loop Walk-through (Level 2)
This part of the game offers the player a worked example. The player is shown a typical C++ program that contains a nested loop with a cout statement. The player can view the code at anytime by pressing a button and is sometimes asked questions about the sample code; such as “which variable represents the outer loop?”
As shown in Figure 3, the map contains two circular paths, representing the two loops in the program. The code statements are represented as chests (1-7) on the path. When the player touches a chest, a part of the code will be executed. The values of the loop control variables are constantly displayed on the screen to show how the variables change during each step of the program.
When the player walks around the large (outer) loop, they are directed into the smaller loop where they must circle several times before they are able to escape back to the outer loop.
