HTML and CSS Reference
In-Depth Information
finalRow
The final row-resting place of the piece when the puzzle is complete. We use this value to
figure out what part of the video to cut out to make this piece.
selected
ABooleanthatisinitiallysetto false .Wewillusethistoseewhetherweshouldhighlight
a piece or switch two pieces when the user clicks a piece.
Notice that we use two nested for:next loops to fill the board array with these objects. Fa-
miliarize yourself with this construct because we use it many times in this game. Two nested
loops used like this are particularly useful for games and apps that require a 2D grid in order
to be displayed and manipulated:
for
for ( var
var i = 0 ; i < cols ; i ++ ) {
board [ i ] = new
new Array ();
for
for ( var
var j = 0 ; j < rows ; j ++ ) {
board [ i ][ j ] = { finalCol : i , finalRow : j , selected : false
false };
}
}
Now that we have the board array initialized, we call randomizeBoard() (we will discuss
this function shortly), which mixes up the puzzle by randomly placing the pieces on the
screen. We finish the setup section of the game by adding an event listener for the mouseup
event (when the user releases the mouse button) and by setting an interval to call
drawScreen() every 20 milliseconds:
board = randomizeBoard ( board );
theCanvas . addEventListener ( "mouseup" , eventMouseUp , false
false );
function
function gameLoop () {
window . setTimeout ( gameLoop , 20 );
drawScreen ()
}
gameLoop ();
Randomizing the puzzle pieces
The randomizeBoard() function requires you to pass in the board variable so that we can
operate on it. We've set up the function this way so that it will be portable to other applica-
tions.
Search WWH ::




Custom Search