HTML and CSS Reference
In-Depth Information
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 com-
ponents 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 char-
acter will respond if you drag your finger around.)
Adding Fog, Enemies, and Loot
Wandering around an empty dungeon isn't a lot of fun for anyone but the most risk adverse adventurer. To make
things more interesting, it's time to add in some enemies to battle with and some loot to pick up.
The first step is to add a sprite class for each of the different types of objects that are needed. In this case
three different types of objects are created:
• Enemies for the player to attack
• Loot for the player to pick up
• A health fountain for the player to replenish their health
Each of these is a short sprite class that has an
interact
method that can dictate how the object interacts
with the player.
