Game Development Reference
In-Depth Information
This function acts as the event handler when a block has been grabbed and also handles the entirety of the game
logic. Let's break this down to examine what is going on.
A variable is first created to hold a reference to the instance of the block that was grabbed, as well as a reference to
the slot that it actually belongs to by using its
key
property. Since the slots were never shuffled, their keys match their
index in the array that holds the reference to them.
The next line uses a method that lets you assign objects in the display list to a specific display index. In other
words, you can reorder the layers of displays object by using this handy function:
stage.setChildIndex(shape, stage.getNumChildren() - 1);
Since all of the blocks are directly in the stage's display list, you call this method on stage. The first parameter
is the child you want to access, and the second is the “layer” in which you want to move it to. You can access the top
layer by referencing the number of children the stage currently has and forcing your grabbed block to take that place.
Similar to arrays, the display list is zero-based so you need to subtract 1 from the length returned to reference the
desired index. The object it replaces in the list is then pushed down one index and the others beneath it follow suit.
This assures you that the blocks won't render underneath any other shapes as you drag them around the stage.
You then proceed with the drag-and-drop functionality that was covered earlier. The
drop
function removes the
dragging of the block and then moves right into the game logic to determine if it was dropped on the appropriate
slot. A
Point
object is first assigned to a variable to hold the
x
and
y
values of where your mouse cursor was when you
released the mouse button. You'll need this to determine if the correct slot was under the mouse when you dropped
the block. In a drag-and-drop scenario, you can get away with simply evaluating your mouse point, which is also the
center of your dragged object, to determine if it was over a drop target. You then invoke the
hitTest
method on the
slot to determine if any of its displayable area intersected with the mouse point when it was let go. If it did, you know
you have dropped it on the correct slot and you increase the score. You also take away its dragging functionality by
removing its
mousedown
listener. It is then tweened to snap in place with the slot by using the slot's
x
and
y
positions.
If the hit test was not passed, you tween the block back to its original position where the player can pick it up and try
again. Both tween callbacks are assigned to your last function,
checkGame
(see Listing 3-9)
.
Listing 3-9.
colorDrop.js - checkGame Function
function checkGame(){
if(score == 4){
alert('You Win!');
}
}
The final function checks if the player has reached four matches, and if they have, alerts them that they have won.
Figure
3-4
shows the alert window displayed when the player wins the game.
