HTML and CSS Reference
In-Depth Information
startXOffset
The number of pixels from the left of the canvas to the location where we will start draw-
ing the grid of puzzle pieces.
startYOffset
startYOffset
The number of pieces from the top of the canvas to the location where we will start draw-
ing the grid of puzzle pieces.
partWidth
partWidth
The width of each puzzle piece.
partHeight
The height of each puzzle piece.
board
board
A two-dimensional array that holds the puzzle pieces.
The following code includes values for each variable:
var
var
rows
=
4
;
var
var
cols
=
4
;
var
var
xPad
=
10
;
var
var
yPad
=
10
;
var
var
startXOffset
=
10
;
var
var
startYOffset
=
10
;
var
var
partWidth
=
videoElement
.
width
/
cols
;
var
var
partHeight
=
videoElement
.
height
/
rows
;
var
var
board
=
new
new
Array
();
Next we need to initialize the
board
array and fill it with some dynamic objects that represent
each piece of the puzzle. We loop through the number of
cols
in the board and create
rows
amountofdynamicobjectsineachone.Thedynamicobjectswearecreatinghavetheseprop-
erties:
finalCol
finalCol
Thefinalcolumn-restingplaceofthepiecewhenthepuzzleiscomplete.Weusethisvalue
to figure out what part of the video to cut out to make this piece.
