• Choose a category
• All
• Classic-Fiction

If the user has selected two pieces, we will swap their positions.

The user will attempt to put the puzzle back together so she can see the video as it was created.

Setting up the game

To start, we are going to set up some variables that will define the game’s playfield. Here is a rundown of the variables and how they will be used:

rows

The numbers of rows in the grid of puzzle pieces

cols

The number of columns in the grid of puzzle pieces

xPad

The space, in pixels, between each column

yPad

The space, in pixels, between each row

startXOffset

The number of pixels from the left of the canvas to the location where we will start drawing the grid of puzzle pieces

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

Figure 6-10. Video puzzle

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:

finalCol

The final column-resting place of the piece when the puzzle is complete. We use this value to figure out what part of the video cut out to make this piece.

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 cut out to make this piece.

selected

A Boolean that is initially set to false. We will use this to see whether we should highlight 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. Familiarize 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 (var i = 0; i < cols; i++) {

board[i] = new Array();

for (var j =0; j < rows; j++) {

board[i][j] = { finalCol:i,finalRow:j,selected: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 33 milliseconds:

board = randomizeBoard(board);

theCanvas.addEventListener("mouseup",eventMouseUp, false);

setInterval(drawScreen, 33);

Randomizing the puzzle pieces

The randomizeBoard() function requires you to pass in the board variable so we can operate on it. We’ve set up the function this way so it will be portable to other applications.

To randomize the puzzle pieces, we first need to set up an array named newBoard that will hold the randomized puzzle pieces. newBoard will be what we call a parallel array. Its purpose is to become the original array—but randomized. We then create a local cols variable and initialize it to the length of the board array that was passed in to the function, and a local rows variable, initialized to the length of the first column—board[0]—in the array. This works because all of our rows and columns are the same length, so the number of rows in the first column is the same as all the others. We now have the building blocks required to randomize the pieces:

function randomizeBoard(board) {

var newBoard = new Array();

var cols = board.length;

var rows = board[0].length