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

stage.centerOn(p.x, p.y);
}
});
The component can grab the stage from the entity, which has it as a parent, and then simply call the
centerOn method to adjust the view.
Finally, the last component needs to grab user input. You can add this below the camera component defini-
tion. This component, called player_input , simply looks at the inputs and sets the p.dx and p.dy vari-
ables (used previously in the tiled component) to indicate the direction the player is trying to move. This
component is listed in Listing 13-8 .
Listing 13-8: The player input component
Q.register('player_input', {
added: function() {
this.entity.bind('step',this,'input');
},
input: function() {
var p = this.entity.p;
if(Q.inputs['left']) { p.dx = -1 }
else if(Q.inputs['right']) { p.dx = 1;}
else { p.dx = 0;}
if(Q.inputs['up']) { p.dy = -1 }
else if(Q.inputs['down']) { p.dy = 1;}
else { p.dy = 0;}
}
});
Because the input system is abstracted away, the player_input component doesn't need to worry about
where the input is coming from, whether it is the joypad or keyboard.
Adding in the Player
With all these components in place, up next is adding in a player class. This player class will represent the
player as they move around the game and encapsulate all their functionality. All you need to do is subclass the
Q.Sprite class, set some basic properties in the constructor, and add the components that were built in the
last section.
Add the Q.Player class, as shown in Listing 13-9 , below the components defined previously.
Listing 13-9: The Player class
Q.Player = Q.Sprite.extend({
init: function(props) {
this._super(_({
sheet: 'characters',
frame: 65,
wait: 0,
z: 10,
attack: 5,
health: 40,