HTML and CSS Reference
In-Depth Information
Figure 5-23. Ship taking off (easing in)
First, we set the beginning position of the ship ( p1 ) to the bottom center of the canvas. Then
we set the beginning speed of the ship very low ( .5 pixels per frame) and set the angle to
270 (straight up the canvas). We then calculate the x and y velocity values for the ship :
var
var p1 = { x : 240 , y : 470 };
var
var tempSpeed = . 5 ;
var
var tempAngle = 270 ;
var
var tempRadians = tempAngle * Math . PI / 180 ;
var
var tempvelocityx = Math . cos ( tempRadians ) * tempSpeed ;
var
var tempvelocityy = Math . sin ( tempRadians ) * tempSpeed ;
var
var ship = { x : p1 . x , y : p1 . y , velocityx : tempvelocityx , velocityy : tempvelocityy };
In drawScreen() , instead of finding the distance between two points, we add the easeValue
to the x and y velocities on each frame and then apply it to the ship x and y values before
drawing it to the canvas. This creates a linear increase in speed, resulting in the easing-in ef-
fect we want to see:
ship . velocityx = ship . velocityx + ( ship . velocityx * easeValue );
ship . velocityy = ship . velocityy + ( ship . velocityy * easeValue );
ship . x += ship . velocityx ;
Search WWH ::

Custom Search