Canvas Games: Part I - HTML5 Canvas - page 656

How Our Player Ship Will Move

Our player ship will change its angle of center axis rotation when the game player presses the
leftandrightarrowkeys.Whenthegameplayerpressestheuparrowkey,theplayershipwill
accelerate (thrust) in the angle it is facing. Because there is no friction applied to the ship, it
will continue to float in the current accelerated angle until a different angle of acceleration is
applied. This happens when the game player rotates to a new angle and presses the up (thrust)
key once again.

The difference between facing and moving
Our player ship can rotate the direction it is facing while it is moving in a different direction.
For this reason, we cannot simply use classic dx and dy values to represent the movement
vector on the x and y axes. We must keep both sets of values for the ship at all times. When
the player rotates the ship but does not thrust it, we need to draw the ship in the new rotated
angle. All missile projectiles that the ship fires must also move in the direction the ship is fa-
cing. On the x-axis, we will name this value facingX ; on the y-axis, it's facingY . movingX
and movingY values will handle moving the ship in the direction it was pointed in when the
thrust was applied. All four values are needed to thrust the ship in a new direction. Let's take
a look at this next.

Thrusting in the rotated direction

After the ship is rotated to the desired direction, the player can thrust it forward by pressing
the up arrow key. This thrust will accelerate the player ship only while the key is pressed.
Because we know the rotation of the ship, we can easily calculate the angle of the rotation.
We will then add new movingX and movingY values to the ship's x and y attributes to move it
forward.
First, we must change the rotation value from degrees to radians:

var var angleInRadians = rotation * Math . PI / 180 ;

You have seen this before—it's identical to how we calculated the rotation transformation be-
fore it was applied to the player ship.

When we have the angle of the ship's rotation, we must calculate the facingX and facingY
values for this current direction. We do this only when we are going to thrust because it is an
expensive calculation, processor-wise. We could calculate these each time the player changes
the ship's rotation, but doing so would add unnecessary processor overhead:

facingX = Math . cos ( angleInRadians );
facingY = Math . sin ( angleInRadians );