HTML and CSS Reference
In-Depth Information
Canvas Video Puzzle
Now we arrive at the most involved example of this section. We are going to create a puzzle
gamebasedonthevideowehavedisplayed onthecanvas,illustrated in
Figure 6-10
.
Hereare
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 have 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 that she can see the video as it
was created.
