Combining Bitmaps and Sound - HTML5 Canvas - page 513

Notice that the checkBounds() function takes a row increment and then a column incre-
ment to test. It is important to note that we don't access tiles in the same manner that
we would access pixels on the screen. Tiles in the playField array are accessed by
addressing the vertical (row) and then the horizontal (column) (using [row][column] ,
not [column][row] ). This is because a simple array is organized into a set of rows. Each
row has a set of 15 columns. Therefore, we do not access a tile in the playField using
the [horizontal][vertical] coordinates. Instead, we use the [row][column] syntax that
simple arrays use to powerful and elegant effect.
In the checkBounds() function, enter the row increment, then the column increment,
and then the object to be tested. If this is a legal move, the checkBounds() function sets
the nextRow and nextCol to be row+rowInc and col+colInc , respectively:
function checkBounds(rowInc, colInc, object){
object.nextRow = object.row+rowInc;
object.nextCol = object.col+colInc;
if (object.nextCol >=0 && object.nextCol<15 &&
object.nextRow>=0 && object.nextRow<15){
object.dx = colInc;
object.dy = rowInc;
if (colInc==1){
object.rotation = 90;
}else if (colInc==-1){
object.rotation = 270;
}else if (rowInc==-1){
object.rotation = 0;
}else if (rowInc==1){
object.rotation = 180;
}
return(true);
}else{
object.nextRow = object.row;
object.nextCol = object.col;
return(false);
}
}
If the move is legal, the dx (delta, or change in x ) and dy (delta, or change in y ) are set
to the colInc and rowInc , respectively.
The animatePlayer() function is called next. Its job is to move the player object to its
new location while running through its animation frames. Here is the code from the
animatePlayer() function:
player.x += player.dx*player.speed;
player.currentTile++;