Game Design: Reusable Code, Part 1 1

So … this is what I am working on today ….

In short, and this is a rant for another day, we found through our pretests that the average student needed FAR more remedial help in mathematics than we had expected.

Each time you go up a level in the game, you are presented a slightly more challenging level of mathematics. For example, you would go from problems with division without remainders to division with remainders. If you were unclear on the concept of division, though, you are going to be in that first level for a while. So …. we started adding activities within levels, to make them “wider”, to provide more practice and instruction on a given concept. Right now, I am working on teaching how to compute perimeter and area, and the difference between the two.

This is one activity in the game, but I think if I design it correctly, I can re-use it many times over. It’s not very simple but it’s not really overly complex, either.  Basically, there are two parts that will be seen by the player, and a third part, the script. The two viewable parts have elements that stay the same and elements that change.

1. THE PROBLEM

This part includes:

• The question asked (required, variable)
• Any hints that can be requested (optional, variable)
• The result that shows when there is a wrong answer (required, variable)
• A button that, when clicked, re-sets the problem and allows the player to try again (required, constant)
• The correct answer (required,variable)
• An input field (required, constant)
• An input button that calls a function to check the answer when clicked (required, constant)

2. THE PLAYING FIELD

This part includes

• The background (required, constant)
• Images 1-10 that appear or disappear in order as the player “earns” them. (variable, optional)
• A text field where the game character says what he/ she wants ,e.g. a dog, different clothes, a house (required, variable)
• An input button that calls a function to create a new problem when clicked (required, constant)

3. THE SCRIPT

This begins with an initialization section. It creates and initializes to zero a variable to track the number of answers given. It also creates a variable to track the number of the question presented.

This initialization section will need to get bigger as we make the code reusable. It is eventually going to hold two, two-dimensional arrays. One dimension is going to be the row which is the question we are on and will hold all of the variable elements for the problem (in array 1) and the playing field (in array 2). It would be possible to do this all in one array but having two just makes it easier to read. Converting it over to use the arrays is what I need to do tomorrow, when I get a break from writing grants.

Next, we have a few functions. Some are pretty simple:

Strip characters function – this removes everything that is not a number. So, if the question is, “What is the area in square feet?” , and the player puts “240 square feet” instead of 240, the extraneous text will be removed and I can just compare the numeric part to the correct answer. This function looks like this:

function NumberSansCommas(numberString) {
    return Number(numberString.replace(/[^\d\.\-\ ]/g, ''));
}

Then, there are two functions that I am going to change. Even though these do the job, if I need reusable code, I will need to change them to use elements of arrays.

The answer function checks the answer and the getQuestion function creates the next question. Both currently use a SWITCH with a case for when the question is #1, 2, etc.The code works but it would be far more re-usable if I replaced those with one or two statements that referenced elements in an array.  This is what I almost aways do when I am going to use loops – do 3  or 4 iterations to make sure the code works and then change it to an implicit or explicit loop.

Since, uncharacteristically, I have a meeting in the morning, I’m going to go to sleep and explain the last two functions tomorrow.

Okay, it wasn’t a day, it was more like  couple of months, but here is part 2.