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

var piece = e.target;
var matrix = new createjs.ColorMatrix().adjustColor(15, 10, 100, 180);
piece.filters = [
new createjs.ColorMatrixFilter(matrix)
];
piece.cache(0, 0, PUZZLE_SIZE, PUZZLE_SIZE);
selectedPieces.push(piece);
if (selectedPieces.length === 2) {
evalSelectedPieces();
}
}
The selected pieces are pushed to the selectedPieces array, so a quick check is written to prevent more than two
pieces from being selected. If still under two, a reference to the bitmap clicked is set to the local variable piece .
For visual indication that a puzzle piece was chosen, a color filter will be created and applied to the bitmap.
Using some of the techniques learned in the “Adding Effects” section, a single filter is applied to the bitmap when
clicked and is pushed into the selectedPieces array.
Finally, you check if there have been two bitmaps that have been selected, and if so, the swapPieces function is
called (see Listing 5-15).
Listing 5-15. Swapping the Locations of the Bitmap Objects when Two Are Selected
function swapPieces() {
var piece1 = selectedPieces[0];
var piece2 = selectedPieces[1];
createjs.Tween.get(piece1).wait(300).to({x:piece2.x, y:piece2.y},200);
createjs.Tween.get(piece2).wait(300).to({x:piece1.x, y:piece1.y},200).call(function(){
setTimeout(evalPuzzle,200);
});
}
A reference to each piece is first assigned to a few variables. A few tweens are then created to swap the location of
each piece. The call method is used on the second tween to call on the function evalPuzzle , which will determine if
the puzzle is complete (see Listing 5-16). A short timeout is set to fire this function as a safety precaution to assure that
the pieces are in their new locations before evaluating them.
Listing 5-16. Evaluating the Puzzle to See Whether All Pieces Are in Place
function evalPuzzle() {
var win = true;
var i, piece;
selectedPieces[0].uncache();
selectedPieces[1].uncache();
for (i = 0; i < pieces.length; i++) {
piece = pieces[i];
if (piece.x != piece.homePoint.x || piece.y != piece.homePoint.y) {
win = false;
break;
}
}