Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 87

To shuffle the bitmap objects into new locations, a loop is set up, similar to the one that was used to create them.
Since you want to keep the game array pieces intact for game evaluations, a clone of it is made to use for the loop.
var p = [];
p = p.concat(pieces);
You'll be randomly grabbing and splicing out objects for the shuffling, so this cloning process is essential.
The length of this array is stored away in the variable l for the loop length. This is done because of the splicing that
will be taking place. A random value is generated and is used to find a puzzle piece in the array, which is immediately
taken out to prevent being chosen again. The new location for each piece is then determined, using the same grid
calculations used when the pieces were first created. The pieces are then tweened to this location.
Figure 5-10 demonstrates the puzzle pieces being shuffled to new locations.
Figure 5-10. The puzzle pieces shuffled to random locations
Moving Puzzle Pieces
Before evaluating the current column in the loop, a click event listener is set, which will call the function
onPieceClick and is shown in Listing 5-14.
Listing 5-14. Selecting the Puzzle Pieces
function onPieceClick(e) {
if (selectedPieces === 2) {
return;
}