Canvas Game Essentials - HTML5 Canvas - page 393

context.stroke();
context.closePath();
//restore context
context.restore(); //pop old state on to screen
//add to rotation
alpha+=.01;
if (alpha > 1) {
alpha=0;
}
}
Game Object Physics and Animation
All of our game objects will move on a two-dimensional plane. We will use basic di-
rectional movement vectors to calculate the change in the x and y coordinates for each
game object. At its very basic level, we will be updating the delta x ( dx ) and delta y
( dy ) of each of our game objects on each frame to simulate movement. These dx and
dy values will be based on the angle and direction in which we want the object to move.
All of our logical display objects will add their respective dx and dy values to their x and
y values on each frame of animation. The player ship will not use strict dx and dy because
it needs to be able to float and turn independently. Let's take a closer look at the player
movement now.
How Our Player Ship Will Move
Our player ship will change its angle of center axis rotation when the game player
presses the left and right arrow keys. When the game player presses the up arrow key,
the player ship will 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 to 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 the ship fires must also move
in the direction the ship is facing. 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.