HTML and CSS Reference
In-Depth Information
Q.scene("level",new Q.Scene(function(stage) {
stage.insert(new Q.Sprite({ asset: "background.png" }));
stage.insert(new Q.Sprite({ asset: "map.png" }));
var ship = stage.insert(new Q.Ship({
asset: 'lander.png',
x: 10, // X Position
y: 170, // Y Position
gravity: 20, // Gravity
m: 1, // Ship's Mass
thrustX: 40, // Horizontal Thrust
thrustY: 80, // Vertical Thrust
}));
}));
Q.stageScene("level");
});
Fire up your code or run the
lander_basic.html
example from the chapter code and use the left arrow,
right arrow, and spacebar keys to move the ship. You can play with the mass and gravity options in the simple
blank loader to get a sense of how adjusting those variables affect the movement of the ship.
Even though the background is loaded in, the ship doesn't interact with it yet but just flies over it. This will
be remedied in the next section.
Getting Pixel Perfect
Armed with your simple ship floating around the screen, now you can start working on the biggest missing ele-
ment: the cave walls.
Although you could build your game as you did in the previous SVG exercise in Chapter 14 and do only
object-to-object collision detection, it makes much more sense to take advantage of the Canvas tag's capability
to access pixel data of bitmaps to do pixel-to-pixel collision detection between the lander bitmap and level map.
You could look directly at the
canvas
tag used to draw the whole game, but as you will be drawing a couple
of layers and the ship, you'd have to be clever to figure out which parts are your wall and which are your ship
(such as by looking for a specific color.) To make the game more flexible you can redraw the background to an
off-screen Canvas and pull the pixel data from there. To facilitate this flexibility, you can add a new method into
the core of Quintus to return pixel data from a loaded image.
Trouble Running the Examples
Different browsers have different restrictions for accessing pixel data from the local filesystem (in other words,
from URLs that begin with
file://
). If you have trouble running the examples (check your JavaScript console to
look for errors), run them off a local server as you have previously for examples that loaded JSON data.
