HTML and CSS Reference
In-Depth Information
new Q.Level("level1.txt",stage)
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;
wait: 0,
delay: 0.15,
tileX: Math.floor(p.x / tileSize),
tileY: Math.floor(p.y / tileSize),
dx: 0,
dy: 0
this.direction = {};
move: function(dt) {
var p =this.entity.p,
stage = this.entity.parent;
if(p.wait <= 0) {
Search WWH ::

Custom Search