HTML and CSS Reference
In-Depth Information
Creating the PlayerShip Object
The first step is to get a ship created and drawn on the page. Open up
game.js
and add the player ship class
to the bottom:
var PlayerShip = function() {
this.w = SpriteSheet.map['ship'].w;
this.h = SpriteSheet.map['ship'].h;
this.x = Game.width/2 - this.w / 2;
this.y = Game.height - 10 - this.h;
this.vx = 0;
this.step = function(dt) {
// TODO - added the next section
}
this.draw = function(ctx) {
SpriteSheet.draw(ctx,'ship',this.x,this.y,1);
}
}
Much like a game screen, a sprite has the same two external methods:
step
and
draw
. Keeping the interface
consistent allows sprites and game screens to be mostly interchangeable. In initializing the sprite, a few more
variables are set that give the sprite a position on the page and a height and a width. (The next chapter uses the
position and height and width to do simple bounding box collision detection.)
The width and height of the sprite are pulled from the sprite sheet. Although you could hard-code the width
and height here, using the dimensions from the sprite sheet mean there is only one location that needs to be
changed if the dimensions need to be changed.
Next, modify the
playGame
function to read as follows:
var playGame = function() {
Game.setBoard(3,new PlayerShip());
}
If you reload the
index.html
file and press the spacebar, you can see the player ship hanging out at the
bottom of the page.
Handling User Input
The next task is to accept user input to allow the player to move the ship back and forth across the game. This
is handled in the step function inside of
PlayerShip
.
The step function has three main parts. The first is to check for user input to update the ship's movement
direction; the second is to update the
x
coordinate based on the direction; and finally the function needs to check
that the updated
x
position is within the bounds of the screen. Replace the
TODO
comment in the preceding step
method with the following code:
this.step = function(dt) {
this.maxVel = 200;
this.step = function(dt) {
if(Game.keys['left']) { this.vx = -this.maxVel; }
else if(Game.keys['right']) { this.vx = this.maxVel; }
