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

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);
});
}
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;
}
}
if (win) {
setTimeout(function () {
alert('YOU DID IT!');
}, 200);
}
else {
selectedPieces = [];
}
}
function startGame() {
createjs.Ticker.addEventListener("tick", function(){
stage.update();
});
createjs.Ticker.setFPS(60);
}
Now that you've seen how to load and manipulate loaded bitmap graphics in your games, you'll next learn how
you can properly manage them using containers.
Containers
Containers are used to group multiple display objects into a single, contained group, which can be positioned and
manipulated as a single display object. These containers have their own display list. In fact, Stage is actually a
container itself that merely resides at the root of your application. You'll quickly see the benefits in using containers,
which are built by using the Container class.