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.