Game Development Reference
In-Depth Information
Figure 5-8.
Two bitmap objects using different portions of the same source
This technique leads us to the first exercise in this chapter. It will use clipping, along with some simple filter
effects, to create a puzzle game using a single photograph image.
Puzzle Swap
Puzzle Swap is a puzzle game where the player moves pieces by selecting the puzzle pieces they wish to swap. Once all
pieces are in their appropriate locations, the image is revealed and the player wins.
•
Load in a single bitmap image.
•
Create multiple bitmap objects that contain only pieces of the full bitmap.
•
Display all bitmap pieces in place for three seconds at the start of game.
•
Explode pieces by shuffling them all to random places.
•
Allow users to swap pieces until all pieces are in place.
•
Selected puzzle pieces are indicated by a color filter that is applied when the piece is selected.
Setting up the Game Files
First, set up the HTML document that includes a
canvas
element and the necessary CreateJS file includes (see Listing 5-10).
You will be using some color filters, so remember to include the appropriate filter scripts as well. The game code will be
written in a separate file named
puzzle.js
. Be sure to create this file and include it in the document.
