HTML and CSS Reference
In-Depth Information
How it works...
When creating a new game object, in this case the
player
object, we must irst create a new
image object within the
Main
object and then assign an external path to the object by setting
the source property. In return this results in a texture being loaded into our application that
is the player sprite texture. This texture is then passed to the player object and is assigned a
position and draw order on the canvas; this is done by means of the drawable object script.
In return, the constructor within
Main
is passed the player sprite and initializes a new player
object, which then draws the player sprite to the canvas.
Handling user input (Must know)
This task will outline and demonstrate the necessary steps required to handle the keyboard
input in order to move the player sprite around the canvas. This will be done by looking at how
to handle different states of any given key on the keyboard and updating the players position
each frame by modifying both the
Player
and
ObjectManager
objects in order to do so.
How to do it...
1. To support keyboard input within our application, we irstly need to modify the player
object to monitor the state of each key pressed as well as updating the position of the
player in each frame.
2.
To begin with, we will outline a series of variables that will be used to determine the
velocity of the player, that is, the direction and speed at which the player is moving.
this.velocity = 50;
this.up = false;
this.down = false;
this.left = false;
this.right = false;
3.
Next we will create two functions, which are used to determine whether or not a key
has been pressed or released. More speciically, we will determine the state of each
of the arrow keys as well as the
W
,
A
,
S
,
D
keys.
this.keyDown = function(key) {
if (key.keyCode == 38 || key.keyCode == 87)
this.up = true;
if (key.keyCode == 40 || key.keyCode == 83)
this.down = true;
if (key.keyCode == 37 || key.keyCode == 65)
