Capturing User Input - Beginning HTML5 Games with CreateJS - page 37

Figure 3-3. All boxes and slots added to the stage
Now that all game elements are added to the stage and the mouse event listeners are attached to the boxes, you
need to write the game logic that will fire when the pieces are grabbed. Listing 3-8 shows this function and how you
use it to handle dragging, dropping, and determining if the player's moves are correct.
Listing 3-8. colorDrop.js - startDrag Function Used to Set Up Your Game Logic
function startDrag(e) {
var shape = e.target;
var slot = slots[shape.key];
stage.setChildIndex(shape, stage.getNumChildren() - 1);
stage.addEventListener('stagemousemove', function (e) {
shape.x = e.stageX;
shape.y = e.stageY;
});
stage.addEventListener('stagemouseup', function (e) {
stage.removeAllEventListeners();
var pt = slot.globalToLocal(stage.mouseX, stage.mouseY);
if (shape.hitTest(pt.x, pt.y)) {
shape.removeEventListener("mousedown",startDrag);
score++;
createjs.Tween.get(shape).to({x:slot.x, y:slot.y}, 200,
createjs.Ease.quadOut).call(checkGame);
}
else {
createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200,
createjs.Ease.quadOut);
}
});
}