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

Figure 5-9. Fifteen bitmap objects perfectly placed to form a complete image
Shuffling the Puzzle Pieces
The puzzle will appear intact for three seconds before its pieces shuffle. With the three-second timeout you created in
the init function, shufflePuzzle is called to shuffle the order of each puzzle piece (see Listing 5-13).
Listing 5-13. Randomly Placing the Bitmap Objects into New Locations
function shufflePuzzle() {
var i, piece, randomIndex;
var col = 0;
var row = 0;
var p = [];
p = p.concat(pieces);
var l = p.length;
for (i = 0; i < l; i++) {
randomIndex= Math.floor(Math.random() * p.length)
piece = p[randomIndex];
p.splice(randomIndex, 1);
createjs.Tween.get(piece).to({x:col * PUZZLE_SIZE, y: row * PUZZLE_SIZE},200);
piece.addEventListener('click', onPieceClick);
col++;
if (col === PUZZLE_COLUMNS) {
col = 0;
row++;
}
}
}