HTML and CSS Reference
In-Depth Information
Figure 6-10. Video puzzle
startYOffset
The number of pieces from the top of the canvas to the location where we will start
drawing the grid of puzzle pieces
partWidth
The width of each puzzle piece
partHeight
The height of each puzzle piece
board
A two-dimensional array that holds the puzzle pieces
The following code includes values for each variable:
var rows = 4;
var cols = 4;
var xPad = 10;
var yPad = 10;
var startXOffset = 10;
var startYOffset = 10;
var partWidth = videoElement.width/cols;
var partHeight = videoElement.height/rows;
var board = 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
amount of dynamic objects in each one. The dynamic objects we are
creating have these properties:
