Crafting a CSS3 RPG - HTML5 Mobile Game Development - page 241

stage.level.sprites[p.tileY][p.tileX] = null;
}
});
This is one of the first significant components for Quintus that has been used in the topic, so it's worth taking
an in-depth look at what this component does.
The initial added() method, if you remember, is called when the component is initially added to a game
object. As is often the case, this method does two main things: extend the properties hash of the game object
and bind to some object events. Here the component adds in some properties to get the current tile location,
movement delay, and movement direction. Next, it binds to the step and removed events.
The step event handler, which corresponds to the move method is the most complicated one. It has the
responsibility to move the object if it's not waiting between steps. (This is tracked in the wait property.) It also
checks for an attacking property that is used for timing when attacking another object.
Finally, the main check determines a destination x and y location, checks if there are any impassable tiles in
the way, and then checks if there is a sprite in the way. If there is no sprite, the object is moved using two helper
methods— moved and setPosition —and the delay is reset to prevent the object from moving too quickly.
If not, the delay is reset and the sprite is added to the direction object. Finally, either a hit or a moved event is
triggered, passing in the data in the direction object.
The direction object is the event object passed with every triggered event. It is reused from call to call to save
on memory.
The helper method setPosition is used to update the x and y location of the object based in the tile loca-
tion. The method moved keeps the level's sprites array in sync to make it easy to check for collisions at the
tile level.
While you're in the component creation mood, you need to add another quick component called trans-
ition to the codebase. Add the code in Listing 13-6 below the definition of the tiled component.
Listing 13-6: The transition component
Q.register('transition', {
added: function() {
Q.transitionDOM(this.entity.dom,'transform','0.25s');
}
});
This simple component just adds transition support on the transform to allow smooth movement when ob-
jects are moved an entire tile.
The next component, which you should add directly below the transition component, is a camera com-
ponent to track the user around the level. This is done simply by binding to the player's moved event and telling
the stage to center on the player when it moves, as shown in Listing 13-7 .
Listing 13-7: The camera component
Q.register('camera', {
added: function() {
this.entity.bind('moved',this,'track');
},
track: function() {
var p = this.entity.p,
stage = this.entity.parent;