HTML and CSS Reference
In-Depth Information
new Q.Level("level1.txt",stage)
);
}));
Q.stageScene('level1');
If you load up the game, you should see your level rendered onto the screen. Because the
level1.txt
file
loads via AJAX, you must ensure you load the page via localhost, not using a file:// URL.
Creating Some Useful Components
Sprites in a tiled environment need to behave differently than sprites in a 2-D platformer might. They should
move in
tileSize
increments around the board, avoid running over walls and each other, and keep the level
sprites array up-to-date as they wander around the dungeon.
It would be nice to encapsulate this functionality in a reusable way. One way would be to create a
TileS-
prite
base class from which all sprites would inherit, but this might prove cumbersome if you want to reuse
sprites from other places. Another way to handle this is to create a component that adds tile-aware positioning
and movement to any sprite. You'll take the latter option.
This component hooks into the
step
event and looks at a sprite's
dx
and
dy
properties (short for direction
x
and direction
y
) to see if the sprite tries to move in any direction. If it does, it checks to make sure that there
aren't any other tiles or sprites in the way; if not it moves the sprite. If there is another sprite in the way, it can
let the sprite know it ran into something by triggering an event and passing the sprite with which it collided.
Open up
rpg.js
again and add the
tiled
component as defined in
Listing 13-5
above the definition for
Q.Level
.
Listing 13-5:
The tiled component
Q.register('tiled', {
added:function() {
var p = this.entity.p;
_(p).extend({
wait: 0,
delay: 0.15,
tileX: Math.floor(p.x / tileSize),
tileY: Math.floor(p.y / tileSize),
dx: 0,
dy: 0
});
this.direction = {};
this.entity.bind('step',this,'move');
this.entity.bind('removed',this,'removed');
},
move: function(dt) {
var p =this.entity.p,
stage = this.entity.parent;
if(p.wait <= 0) {
