HTML and CSS Reference
In-Depth Information
</div>
</body>
</html>
Canvas Video Puzzle
Now we arrive at the most involved example of this section. We are going to create a
puzzle game based on the video we have displayed on the canvas, illustrated in
Fig-
ure 6-10
. Here are the steps showing how the game will operate:
1. We will load the video onto the canvas but not display it.
2. We will decide how many parts we want to be in our puzzle.
3. We will create a
board
array that holds all the puzzle pieces.
4. The pieces will be displayed in a 4×4 grid.
5. We will randomize the pieces on the board to mix up the puzzle.
6. We will add an event listener for the mouse button.
7. We will set an interval to call
drawScreen()
.
8. We will wait for the user to click a puzzle piece.
9. While we are waiting, the various parts of the video will play just as though they
were one video.
10. When a user clicks a puzzle piece, it will highlight in yellow.
11. If the user has selected two pieces, we will swap their positions.
12. 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
