Game Objects in a Structure - Building JavaScript Games for Phones, Tablets, and Desktop - page 186

The outer for loop iterates from row 0 until this.rows - 1. This means the last row doesn't move
downward. And this is what you want, because there is no row below the last row! The inner for
loop iterates over the columns (from 0 until this.columns ) and copies the value at location ( x , y ) to
location ( x , y + 1 ). After this inner for loop has finished, the contents of row y have been copied to
row y + 1 . However, if you try to run this for loop, you'll notice that it doesn't have the behavior you
want: the contents of the first row are copied to all the rows below it! How is this possible?
This is an example of why it's important to think through how loops work. The problem in this case
is that you forgot that loops are sequential . Let's look at what is happening. The first time you enter
the loop, you copy the contents of row 0 to row 1. The second time you enter the loop, you copy
the contents of row 1 to row 2. However, row 1 was already replaced by the contents of row 0 the
previous time you entered the loop, so you're copying (indirectly) the contents of row 0 to row 2!
How can you solve this issue? Actually, you only have to make a simple change to the algorithm.
Instead of starting with row 0 and continuing until you reach the last row, you start with the last row
and continue upward until you reach the first row. The modified algorithm looks like this:
for (var y = this.rows - 2; y >=0; y--) {
for (var x = 0; x < this.columns; x++) {
this.setGridValue(x, y + 1, this.getGridValue(x, y));
}
}
In this case, you start with the row at index 8 and copy its contents to the row at index 9. After that,
you copy row 7 to row 8, and so on. Unlike the previous version of the algorithm, this approach
works, because you work from the bottom upward and only make modifications to rows that you no
longer have to consider: once you've copied the values from row 7 to row 8, you don't look at row
8 anymore in the remainder of the algorithm.
When you use loops in your programs, you'll encounter bugs like those just described. The best
thing to do when that happens is to draw a diagram on paper to see what is happening, and write
out what the loop is doing, iteration by iteration. A debugger can also be helpful, because it allows
you to stop the code in any place and check the values of variables.
After you've moved all the rows down, the only thing left to do is generate new random values for
the first row. This can be done with a single for instruction that retrieves a random number for each
item in the row:
for (x = 0; x < this.columns; x++) {
var randomval = Math.floor(Math.random() * 3) + 1;
this.setGridValue(x, 0, sprites["single_jewel" + randomval]);
}
More Possibilities with Grids
In order to get acquainted with how multidimensional arrays work, you can try to program some
other grid operations on your own. For example, can you write a method void removeRow(int i)
that removes a row at a given index and creates new values for the top row? Can you write a method
that performs a round-robin operation on the rows (all rows move down, and the last row becomes
the first row)? How about moving rows up? Or moving columns? It's possible to create many