HTML and CSS Reference
In-Depth Information
Figure 6-10. Video puzzle
The number of pieces from the top of the canvas to the location where we will start
drawing the grid of puzzle pieces
The width of each puzzle piece
The height of each puzzle piece
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:
Search WWH ::

Custom Search