Professional HTML5 Mobile Game Development by Pascal Rettig

Author:Pascal Rettig
Language: eng
Format: epub
Publisher: Wiley Publishing, Inc.
Published: 2012-08-17T16:00:00+00:00

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, maxHealth: 40, gold: 0, xp: 0 }).extend(props)); this.add('player_input, tiled, camera, transition'); } });

The player defines a number of initial properties that won’t be used immediately, such as health, maxHealth, gold, and xp, but these will be used later in the chapter. As you can see, however, using components makes it easy to add reusable chunks of functionality to sprites without creating a deep class hierarchy.

To get a player on the screen, add the player to the stage in the level1 scene at the bottom of the file, and while you’re there, add the transition component to the stage as well, so the stage can track the player smoothly.

Q.scene('level1',new Q.Scene(function(stage) { if(Q.width > 600 || Q.height > 600) { stage.rescale(2); } stage.level = stage.insert( new Q.Level("level1.txt",stage) ); stage.add('transition'); var player = stage.insert(new Q.Player({ x: 1 * tileSize, y: 1 * tileSize })); player.camera.track(); player.bind('removed',stage,function() { Q.stageScene('level1'); }); })); Q.stageScene('level1');

With these pieces in place, you should load the rpg.html file and have the player move around the stage in response to the keyboard arrow keys or the joypad. (The joypad won’t actually be visible, but the player character will respond if you drag your finger around.)

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.