Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 12

How it works...
In order to move the player, we irst 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 irst 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 inally implement a call
to update and draw each game object 30 times a second.
Animating the player (Must know)
For this task, we will focus on enhancing the visual appeal of the game by introducing
and demonstrating the necessary steps required to animate the player sprite. These steps
will involve adjusting the game framework to handle the loading and updating animated
sprite sheets.