HTML and CSS Reference
In-Depth Information
10: true
};
Q.input.keyboardControls();
Q.input.joypadControls({zone: Q.width});
Q.load(['characters.png',
'dungeon.png',
'items.png',
'level1.txt'], function() {
Q.sheet('characters', 'characters.png',
{ tilew: tileSize, tileh: tileSize });
Q.sheet('tiles', 'dungeon.png',
{ tilew: tileSize, tileh: tileSize });
Q.sheet('items', 'items.png',
{ tilew: tileSize, tileh: tileSize });
Q.scene('level1',new Q.Scene(function(stage) {
if(Q.width > 600 || Q.height > 600) {
stage.rescale(2);
}
alert("Loaded!");
}));
Q.stageScene('level1');
});
});
The code sets up the Q object, sets a couple of global variables you'll use later, and then sets up the default
keyboard controls and a full-width joypad.
Next, the code loads four assets—three images and a level data text file—and sets up three spritesheets after
those are loaded.
Next, it creates a new scene called level1 . Right now that scene doesn't do much except rescale the game
if the width or height of the browser is greater than 600. This allows the iPad and desktop browser to get a
zoomed-in view of the game. (For browsers that support transforms, older browsers see everything smaller.)
Finally, the game calls Q.stageScene("level1") to load that first scene into the game. If everything
goes according to plan, you should get an alert on the page that says “Loaded.”
Adding a Tile Map
It's time to get tiles onto the board. To do this the game subclasses the DOMTileMap class to create a class that
can take in the level data text file asset and turn it into something the DOMTileMap class can use.
To make it easy to create levels, the level format will be an ASCII file where Xs represent walls and periods
(.) represent corridors and rooms. Additional sprites such as monsters and treasures will be demarked by other
Search WWH ::




Custom Search