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.
To support keyboard input within our application, we firstly 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.
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;
Next we will create two functions, which are used to determine whether or not a key has been pressed or released. More specifically, 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) this.left = true; if (key.keyCode == 39 || key.keyCode == 68) this.right = true; } this.keyUp = function(key) { if (key.keyCode == 38 || key.keyCode == 87) this.up = false; if (key.keyCode == 40 || key.keyCode == 83) this.down = false; if (key.keyCode == 37 || key.keyCode == 65) this.left = false; if (key.keyCode == 39 || key.keyCode == 68) this.right = false; }Each of these functions performs a number of checks to determine whether a key has been pressed or released. As a result these checks determine in which direction the player should move if a certain key has been pressed.
In order to move the player in the direction in question, we must update the number of units the player has moved each frame by introducing an
Updatefunction to the player object as follows:this.Update = function (deltaTime, context, deltaX, deltaY) { if(this.up) this.y -= this.velocity * deltaTime; if(this.down) this.y += this.velocity * deltaTime; if (this.left) this.x -= this.velocity * deltaTime; if (this.right) this.x += this.velocity * deltaTime; }The next step required is to initialize keyboard input and call both the
KeyDownandKeyUpevents inside of theInitObjectManagerconstructor as follows:document.onkeydown = function(key){objectManager.keyDown(key);} document.onkeyup = function(key){objectManager.keyUp(key);}Once a key is pressed, each of the previously declared events trigger one of two corresponding functions, which we will now declare below the
InitObjectManagerconstructor.this.keyDown = function(event) { for (obj in this.objects) { if (this.objects[obj].keyDown) this.objects[obj].keyDown(event); } } this.keyUp = function(event) { for (obj in this.objects) { if (this.objects[obj].keyUp) this.objects[obj].keyUp(event); } }The final step required is to modify the object manager's
Drawfunction. Replace the for loop within ourDrawfunction with the modified loop as follows:for (obj in this.objects) { if (this.objects[obj].Update) { this.objects[obj].Update(deltaTime, this.context, this.deltaX, this.deltaY); } if (this.objects[obj].Draw) { this.objects[obj].Draw(deltaTime, this.context, this.deltaX, this.deltaY); } }
In order to move the player, we first began by declaring the velocity, which includes the speed or pixels the player moves per frame. This velocity also includes the direction in which the player moves, that is, up, down, left, or right. Each direction is a Boolean value and is initially set to false.
In order to determine whether or not the player wishes to move in one of these four directions we then implemented two functions. Each of which determines the state of a given key on the keyboard.
This is done through means of the KeyDown and KeyUp functions declared within the Player object. Both of these functions determine if any of the arrow keys or the W, A, S, or D keys have previously been pressed or released. As a result, the KeyDown function returns true if a key has been pressed and the KeyUp function returns false if no key is being pressed. More information on key numbering or a list of ASCII and JavaScript key codes can be found at the website http://bit.ly/tuzd3s.
We then implemented an Update function within the player object, which moves the player in the direction determined by the Boolean variables previously declared. This update function is called within the draw function of the object manager object. These directional values correspond to a key press, that is, if the up arrow key is pressed the up value returns true and the Update function moves the player sprite 50 pixels up the canvas and similarly for the down, left, and right directional values.
In order to determine if the player has pressed or released a key we must first implement a prebuilt JavaScript event for each of these states. This is achieved through the onkeydown and onkeyup event handlers within our object manager object.
Each of these event handlers call their corresponding KeyDown and KeyUp functions. These functions are also declared within the object manager object and are used to loop through each game object and in return call the KeyDown and KeyUp functions within the player object. In order to see the player sprite moving on the screen, we then finally implement a call to update and draw each game object 30 times a second.