HTML and CSS Reference
In-Depth Information
else { this.vx = 0; }
this.x += this.vx * dt;
if(this.x < 0) { this.x = 0; }
else if(this.x > Game.width - this.w) {
this.x = Game.width - this.w;
}
}
}
The first part of the method checks the Game.keys map to see if the user is currently pressing the left or
the right arrow keys, and if so sets the velocity to the correct positive or negative value. The second part of the
code simply updates the x position with the current velocity multiplied by the fraction of a second since the last
update. Finally, the method checks to see if the x position is either off the left side of the screen (less than zero)
or off the right side of the screen (greater than the width of the screen minus the width of the ship). If either of
those conditions is true , the value of x is modified to be within that range.
Summary
You now know how to get the framework of an HTML5 game up-and-running, including loading a sprite sheet,
drawing on canvas, adding in a parallax background, and taking in user input. At this point, you can fire up
the player/index.html file and fly your ship left and right using the arrow keys. Congratulations! You're
well on your way to having your first HTML5 game up-and-running. The next chapter builds on these initial
pieces of code to add in enemies, levels, and the rest. Chapter 3, “Enhancing The Game,” finishes this initial
game by adding in mobile support.
 
Search WWH ::




Custom Search