Canvas Games: Part I - HTML5 Canvas - page 657

When we have values on the x and y axes that represent the direction the player ship is cur-
rently facing, we can calculate the new movingX and movingY values for the player:

movingX = movingX + thrustAcceleration * facingX ;
movingY = movingY + thrustAcceleration * facingY ;

To apply these new values to the player ship's current position, we need to add them to its
current x and y positions. This does not occur only when the player presses the up key . If it
did, the player ship would not float; it would move only when the key was pressed. We must
modify the x and y values on each frame with the movingX and movingY values:

x = x + movingX ;
y = y + movingY ;

Redrawing the player ship to start at angle 0

As you might recall, when we first drew the image for our player ship, we had the pointed
end (the top) of the ship pointing up. We did this for ease of drawing, but it's not really the
best direction in which to draw our ship when we intend to apply calculations for rotational
thrust.Thepointing-updirection isactually the −90 (or 270 )degreeangle.Ifwewanttoleave
everything the way it currently is, we will need to modify the angleInRadians calculation to
look like this:

var var angleInRadians = ( Math . PI * ( player . rotation − 90 )) / 180 ;

This is some ugly code, but it works fine if we want our player ship to be pointing up before
we apply rotation transformations. A better method is to keep the current angleInRadians
calculation but draw the ship pointing in the actual angle 0 direction (to the right). Figure 8-5
shows how we would draw this.

Figure 8-5. The player ship drawn at the 0 degree rotation

The drawing code for this direction would be modified to look like this:

//facing right
context . moveTo ( − 10 , − 10 );